Firefoxで戻るボタンを押した際に二重送信防止を解除する

今回はFirefox(テストで利用したバージョンは30.0)における厄介な挙動をJavaScriptで解決しようというお話。 IE 11や最新のChrome(35系)では特に気にする必要はないものです。

フォームで二重押下を防止するために、1度ボタンを押すとボタンの状態をdisabledにするということがあります。 そこまでは何も問題ないのですが、Firefoxではボタンを押してsubmitをした後に、戻るボタンを押すとdisabledの状態が継続しており、 再度submitができない状態になってしまいます。もう一度戻るボタンを押すとsubmitできるようになるのですが、 その挙動は一般的にユーザが想定していないものであるはず。

そこで、jQuery(利用したバージョンは1.11.0)を利用して、 一度戻るボタンを押すだけでdisabledの状態が解除できるようにしてみました。コードは以下のようになります。

<script type="text/javascript"><!--
$(document).ready(function() {
    $(window).unload(function(){});
    $('#button').attr('disabled', false);
});
--></script>

1行目はDOMを構築した後に実行せよという意味です（おまじないと思って差し支えないでしょう）。 2行目はBackForwardCacheを無効にせよという意味になります。元のページに遷移した際にキャッシュを使うなという意味になります。 つまり、ボタンを押したという状態を使うなということになります。 3行目はボタンにdisabled属性をfalseにせよという意味で、ボタンを利用可能にするという意味になります。 初期状態はfalseでなければならないので、明示的に設定しました。

これにより、ボタンを1度叩いてdisabledになった状態でブラウザの戻るボタンを押しても、disabledの状態にならなくなります。 ただし、フォームにあった情報(入力したテキスト等)はすべて落ちてしまうので、再入力が必要になります。 もっとも、それは仕様としてしまっても良いとは思いますが。