HTMLのformでEnterキーを押下した時の動き

業務向けWebアプリでは、オペレータさんがマウスを使わずキーボードのみで操作しているかと思います。この場合、Enterキー押下でsubmitするケースが多いのではないでしょうか。このあたりのUIを作っていて、Enterキー押下時の動きがよくわからずにハマってしまったので、調べたことを整理しておきます。

formでEnterキーを押下した時の動き

form内のテキストボックス(<input type="text">)、submitボタン(<input type="submit">)の数により、動きが違ってくるようです。

テキストボックスの数	submitボタンの数	submitされるか
1	0	される
1	1	される
2	0	されない
2	1	される

※submitされるケースでは、submitボタンがクリックされた状態になるようです。

確認コード

テキストボックス1、submitボタン0のケース

<form onsubmit="alert('onsubmit')">
        <input type="text"/>
</form>

テキストボックスにカーソルをおき、Enterキーを押下すると"onsubmit"が表示されます。

テキストボックス1、submitボタン1のケース

<form onsubmit="alert('onsubmit')">
        <input type="text"/>
        <input type="submit" value="submit" onclick="alert('onclick')"/>
</form>

テキストボックスにカーソルをおき、Enterキーを押下すると"onclick", "onsubmit"が表示されます。

テキストボックス2、submitボタン0のケース

<form onsubmit="alert('onsubmit')">
        <input type="text"/><br/>
        <input type="text"/>
</form>

テキストボックスにカーソルをおき、Enterキーを押下しても、何も表示されません。

テキストボックス2、submitボタン2のケース

<form onsubmit="alert('onsubmit')">
        <input type="text"/><br/>
        <input type="text"/><br/>
        <input type="submit" value="button" onclick="alert('onclick')"/>
</form>