autocomplete の指定で Firefox が記憶喪失になるのを防ぐ方法

大抵の WEB ブラウザは、フォームに入力した内容を記憶しておいて、次回からその内容を補完したり選択できる機能を持っています。

WEB ブラウザの利用者から見て、この機能はたいへん便利なものなのですが、サイトの運営者は様々な理由から、この機能がなるべく無効になるように、次のように input 要素の autocomplete 属性を off にすることがあります。

<input type="text" name="c" value="" autocomplete="off" />

autocomplete 属性なんですが、WEB ブラウザの既定の振る舞いが変わってしまうという副作用を持っています。IE6、Opera9、Safari3.1 (共に Windows XP)は期待どおりなのですが、Firefox2 (Windows XP) だと、フォームに値を入力して submit して、その後、戻るボタンでフォームに戻ると、入力していたハズの値が空欄になってしまいます。

これだと、戻るボタンで戻って入力しなおすという期待をしているページ遷移が機能しないことになります。もしかすると、autocomplete 属性の副作用に気が付かずにサイトを運営しているケースもあるのかもしれません。

まず、基本は autocomplete 属性は使わないのが正解じゃないかという立場です。そして、どうしても autocomplete 属性を指定したいときは、HTML に埋め込まず、次のように JavaScript を使ってコントロールすれば、副作用の不都合を回避できることがわかりました。

IE6、Firefox2、Opera9、Safari3.1 (共に Windows XP)で動作を確認しました。

<script type="text/javascript">
jQuery(function($) {
  var c = $('#c')
    .attr('autocomplete', 'off');
    
  // window.unload
  $(window).unload(function() {
    c.removeAttr('autocomplete');
  });
});
</script>

<form method="post" action="./example.cgi">
<input id="c" type="text" name="c" value="" />
<br />
<input type="submit" name="submit" value="go" />
</form>

ページをロードした直後に autocomplete 属性を off にします。また、ページをアンロードする(つまり、ページを遷移する)直前に autocomplete 属性を削除します。