CLOVER🍀

That was when it all began.

Google Chromeとautocomplete

Google Chromeで、入力フォームの内容を覚えてしまい、ブラウザの「戻る(history.back)」した時に他のブラウザと挙動が違うという問題にけっこう悩まされたので、メモとして。

やりたかったこと。

  • 「戻る」ボタンを使った時に、キャッシュからではなくサーバー側からHTMLを取ってきて再描画したい
  • 結果として、入力フォームの内容はキャッシュを表示しないため忘れてしまうが問題なし

これだけです。で、Cache-ControlやらExpiresやらのヘッダを仕込んだ結果、IEやFirefoxでは意図通りの挙動になったのですが、Google Chromeだけ前に入れた値をバッチリ覚えてしまっていて困りました。

どうも、変更したformの内容を覚えている模様。具体的には、セレクトボックスやチェックボックスの選択結果を戻っても覚えていてしまっていて、(この挙動とさせるのがいいか悪いかはさておき)かなり困りました。

JavaScriptで各Nodeのプロパティを調べても、やっぱり覚えてしまっているようなのです。

で、調べてヒントになったのがこちら。
firefox - Why does the checkbox stay checked when reloading the page? - Stack Overflow

Firefoxではないのですが、結論としてはautocomplete属性にoffなどを定義すれば、Google Chromeでも他のブラウザと同じ挙動になりました。

autocomplete属性は、formタグもしくはinputタグに付与するもののようです。formタグに付与すると、その配下のinputタグすべてに効くと…。

<form ... autocomplete="off">

ところで、セレクトボックスはselectタグやoptionタグで表現するので、直接要素にautocomplete属性は付与できません。自分のケースでは、特に問題なかったのでformタグに付与しましたとさ。