textfieldの個数によってformがsubmitされたりされなかったりする
フォームにフォーカス当てて、Enterを押すとサブミットされる時とされない時があるのに気づいたことはありますか?
衝撃的な事にフォームに含まれるテキストフィールドの個数で挙動が変わるのです。
例えば
<form> <input type='text' /> </form>
の場合、テキストフィールドにフォーカスを合わせてEnterを押すとonsubmit処理が実施されて画面遷移します。
一方
<form> <input type='text' /> <input type='text' /> </form>
の場合、Enterを押しても無反応です。
ところが、下記のようにサブミットボタンを追加してEnterを押すと今度は画面遷移します。
<form> <input type='text' /> <input type='text' /> <input type='submit' /> </form>
更にこのサブミットボタンのスタイルをdisplay:none;にしたり、disabledにしたりするとまた挙動が変わります。
ブラウザによっても微妙に動きが異なります。
今のところ調査した感じだと下記のような挙動のようです。
○・・・Enterで画面遷移する
×・・・Enterを押しても無反応
テキストフィールド1つの場合
IE | FF |
常に○ | 常に○ |
テキストフィールド2つの場合
IE | FF | |
サブミットボタンのdisplay:none | × | ○ |
サブミットボタンがdisabled | × | × |
サブミットボタンがない | × | × |
それにしても、なぜこんな仕様になってるんでしょうか。何か歴史的な問題?
ちなみに、Rubricksではこの問題にぶち当たった箇所で挙動を統一化するためにヘルパでdisplay:noneなテキストフィールドを2つ強制的に作成するようにしました。
http://dev.rubricks.org/wiki/RubricksDevelopmentTipsFormSubmitJa
(Shouta)