130単位

フォームでのEnterキー押下について調べてみた

XHTML/CSS

前回こんなことを書きましたが、なんとなく引っかかりがあったので調べてみたら、いろいろ間違っていたことが判明。

フォームの仕様？として、input要素で「Enterキー」を押下すると、フォームのactionで指定した先へ post または get されてしまいます。

javascriptでフォームを送信する際に気をつけること - パンプキンスパイスラテ

自分でブクマしておいて忘れていました。恥ずかしい限り。ただ、ブクマしておいて良かったとも思います*1。

これまでの認識

type="button"にしておけば、ボタンが押されてもSubmitしない
↓
テキストボックスでEnterキーを押したときもSubmitしない

この認識がそもそも間違っていました。

わかったこと

ブラウザについて

• Safariのみで起こるわけではない
• IEやFirefoxでも起こる
• ただしSubmitの発動条件がブラウザで少し異なる(後述)

type="button"について

• テキストボックスEnter押下でSubmitされるのに、type="button"のinput要素の存在は関係ない
• テキストボックスしかないフォームでも、Enter押下でSubmitされる
• 例：

他のinput要素

• チェックボックス等でも、フォーカスが合っていればEnter押下でSubmitされる

テキストボックスが複数の場合

• ブラウザにより挙動が異なる
• IE/Firefox/Opera…Enter押下してもSubmitされない
• Opera/Safari/Chrome…Enter押下するとSubmitされる
• 例：
• type="submit"なボタンが存在すると、どのブラウザでも反応する

【※追記】ブクマコメントで指摘があり、Operaで実際に試してみたらテキストボックス複数の場合はSubmitされませんでした。すみませんです。(Opera@USB Version 9.64 + WinXP)

参考リンク

Enterキーで送信されてしまうのを防ぐ - ［ホームページ作成］All About
http://allabout.co.jp/internet/hpcreate/closeup/CU20080902A/

ツイートする

Permalink | コメント(0) | トラックバック(0)