buttonタグの落とし穴

Tips：自分のためのメモ


ウノウさんやPHPSPOT開発日誌さんでも紹介され、私も普段大いに活用させてもらっているbuttonタグだが、ものすごく今更ながらに、万能でもないことがわかった。


何かというと、
enter（return）キーで、submitされてしまうこと。


ちなみに、同form内にinput（textなど）タグを使用しているとき。


これは別にbuttonタグだから、というわけでもない。
input のtype="submit"でも、同様の問題がある。
が、いかんせん、inputタグの方は、いわば標準的なボタンのタグなので、JavaScriptなどを使い対応されている方も多い。


また、enterキーがsubmit扱いになるのは、ブラウザどころかOSレベルでの仕様だったりもする。
けど、たとえば、コミュニティサイト新規開発において、会員登録させたい場合、idやメールアドレスを入力させたいことも多いだろう。
このような入力項目の半角英数文字。
ユーザとしては、まだ日本語入力をしているつもりで、ついつい「文字確定」のつもりでenter（return）キーを押下してしまうことがある。
するとフォームが送信されてしまい、確認画面に行くか、未入力項目があってエラーを返されたりするのだ。
仕様とはいえ、あまりユーザビリティはよくない。


この問題にぶち当たった案件では、最初からHTMLでのsubmitは行わずに、JavaScriptによるフォーム内容送信を行うつもりでいたので、とりあえず

  • buttonタグのtype="submit"をtype="button"に変更
  • buttonタグをonClickした際にJSによるform送信

を行うようにした。


ミソとしては、buttonタグから、type="submit"をとるだけでもIEでは、submit扱いが解除されると言うこと。
ただ、Firefoxでは、きちんとtype="button"を明言してあげないと、buttonタグ＝submitするもの、として考えてしまうようだ。


つまり、Safariさんは、これでもまだまだreturnキー（Macですから）を押下すると、submitしようとする。
SYNCKGRAPHICA様が考えられている
ENTER押されたらフォーカスを次へ
が使えそうな気もするが、これもやはりinputタグをベースに作られているので、buttonタグには効かない。
改造すれば効きそうだけど、それはまた時間があるときに……。


ここまで書いていて気が付いた。
どうぜJSでsubmitするのであれば、aタグとかでボタンっぽくしておいてもいい訳か……。
いちおうform内のボタンなので、buttonタグを使っているが……うーん、aタグを使うと、なんか甘えのような気がするしなあ。