formの多重送信を止める方法についてのさらに小さな罠
高校の同級生だった友人がパソコンを使い始めた頃、操作の様子を隣で見ているとどうも様子が変なのです。デスクトップのアイコンも、スタートメニューのアイコンも、Webのアンカーリンクも何でもかんでも押せる物はダブルクリックしているのです。
どうやらテレビ番組なんかで
- パソコンにはダブルクリックの操作が必須
- ダブルクリックはかなり高度な操作
- だから高齢者などは挫折する
などと真しやかに語られていた*1のを真に受け過ぎて、ダブルクリックしなくちゃいけない気持ちでいっぱいになり、シングルクリックを試すことすら頭に無くなっていたみたいです。面白いのでそのままにしていたのですが、あれから数年、彼はまだダブルクリック一本なのか気になります。
そんな人でもsubmitボタンをダブルクリックしなくなる方法を、少し前にはてなの伊藤さんが紹介(id:naoya:20050803:1123053496)されていました。翌日にはその機能(?)を使用した場合にsubmitに割り当てた値が送信されないという罠についても紹介されており、それからしばらく経った最近、はてなのところどころでこの機能が働いている姿を見かけます。
で、実はこの方法にはまだ小さな罠があって、ブラウザはformの部品にフォーカスがある状態でEnterキーを押すとsubmitを実行するようになっているのですが、この時の動作がブラウザごとに微妙に異なり、IEだと抜け穴があるのです。
Firefox*2の場合はどうやらform内で一番最初のsubmitボタンを押すのと同じ動作をするらしく、submitボタンがいくつかあっても一番最初のボタンをdisabledにするとEnterが効かなくなるのに対し、IE*3の場合はsubmitボタンがdisabledであっても関係ないみたいです。そもそもEnterを押した場合はsubmitに割り当てた値は送信しないみたいです。
その為、ボタンがdisabledになる場所でもIEでEnterキーを連打すると多重送信が起きます。実際のところ、ユーザが意図して行わない限りはダブルクリックの可能性の方が高いと思うので、優先度は低そうですが、対応しておいてもバチは当たらないと思うのでした。
以前この問題に対応したときは
onSubmit="return disableSubmit()"
みたいにして、関数が呼ばれる度にインクリメントされるカウンタの値によってtrue/falseを返すようにしていましたが、他にも書き方は色々とありそうです。
伊藤さんと自分を比べたら、きっとエンジニアとしては格が違うんだろうなと思うわけですが、こうして同じ問題について取り組んでいるのだとわかると、ちょっと不思議な気分になるのでした。
