Home > 技術 > IEとFirefoxでテキストボックス上でのEnterの挙動について

IEとFirefoxでテキストボックス上でのEnterの挙動について

テキストボックス上にカーソルがある場合にEnterキーを押すとSubmitが走るようになっていますが、IEとFirefoxまたinput要素なのかbutton要素なのかで結構挙動が違うのでいろいろ試してみました。

まずテキストボックスの値ですが、これはどの場合でも正しくSubmitされていました。
問題なのはinput要素とbutton要素でどのボタンをクリックしたかがサーバーにSubmitされるかされないかの違いがあります。
以下でinput要素とbutton要素の場合にどういったボタン情報がSubmitされるかをまとめてみました。
かなり個人的なメモですが、UIを意識したサイト作りには欠かせないかもしれません。
特にサーバー側でどのボタンをクリックされたかで判定している場合は、場合によってはボタン情報がSubmitされないので予期せぬバグが潜む可能性があります。

なお今回はFormのメソッドを指定していないので、GetとしてSubmitされます。

input type="button"の場合

<form>
<input type=text name="text1" value="テキスト1" />
<input type=submit name="input1" value="aaaaa" />
</form>

firefox:text1=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%881&input1=aaaaa
ie6.0:text1=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%881
ie7.0:text1=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%881

input type="button"(複数)の場合

<form>
<input type=text name="text1_1" value="テキスト1_1" />
<input type=text name="text1_2" value="テキスト1_2" />
<input type=submit name="input1_1" value="ddddd" />
</form>

firefox:text1_1=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%881_1&text1_2=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%881_2&input1_1=ddddd
ie6.0:text1_1=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%881_1&text1_2=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%881_2&input1_1=ddddd
ie7.0:text1_1=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%881_1&text1_2=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%881_2&input1_1=ddddd

buttonの場合

<form>
<input type=text name="text2" value="テキスト2" />
<button type=submit name="input2" value="bbbbb">ccccc</button>
</form>

firefox:text2=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%882&input2=bbbbb
ie6.0:text2=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%882&input2=ccccc
ie7.0:text2=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%882

button(複数)の場合

<form>
<input type=text name="text2_1" value="テキスト2_1" />
<input type=text name="text2_2" value="テキスト2_2" />
<button type=submit name="input2" value="eeeee">fffff</button>
</form>

firefox:text2_1=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%882_1&text2_2=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%882_2&input2=eeeee
ie6.0:text2_1=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%882_1&text2_2=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%882_2&input2=fffff
ie7.0:text2_1=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%882_1&text2_2=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%882_2&input2=fffff


一番気持ちが悪いのはテキストボックスの個数による影響です。
これはIE限定のようですが、テキストボックスが1個の場合にはボタン情報がSubmitされず、2個以上配置した場合にはSubmitされるようです。
う~ん、恐ろしい・・・

■参考リンク
IE6のフォームの挙動
IE のフォームがタコい件について。

Trackback:0

TrackBack URL for this entry
http://hisasann.com/cgi-bin/mt/mt-tb.cgi/996
Listed below are links to weblogs that reference
IEとFirefoxでテキストボックス上でのEnterの挙動について from HouseTect, JavaScriptな情報をあなたに

Home > 技術 > IEとFirefoxでテキストボックス上でのEnterの挙動について

Tag cloud
月別アーカイブ
Powered by
Powered by
Movable Type Commercial 4.261

Page Top