- 2008-04-30 (水)
- 技術
テキストボックス上にカーソルがある場合に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 のフォームがタコい件について。
Comments:0
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, JavaScripter Blog
