form要素内のエンターキーによる意図しないボタン発火防止

シチュエーション

form要素内にあるテキストボックスにカーソルを当てた状態でエンターキーを押すと、
form要素内のボタンが発火する。

<form>
    <input type="text" />
    <button onclick="hogeEvent()">hoge</button>
    <input type="submit" value="submit" />
</form>

上記の場合、hogeボタンが発火した。
hogeボタンをコメントアウトしてみたらsubmitボタンが発火した。

原因

HTMLの仕様がそうなっているから
https://developer.mozilla.org/ja/docs/Web/HTML/Element/form

対処

input要素はbutton要素にして、typeを button にする。
submitは onclick="submit();" を設定する。

<form>
    <input type="text" />
    <button type="button" onclick="hogeEvent()">hoge</button>
    <button type="button" onclick="submit();">submit</button>
</form>

これにより、form要素内のボタンの意図しない発火を防ぐことができる。

参考

Enterキーを無効にする方法
Enterキーを押すとsubmitされるのを防ぐ