【Web】テキストボックスでEnter押下時に勝手にSubmitされてしまうのを防ぐ方法

HTMLにそんな仕様あったのかーということがあったので(:3｣∠)

事象

formタグ内に１行テキストボックスが１つしか存在しない場合において、
Enterキーを押下すると勝手にSubmitされてしまうみたいです。
ChromeとIEでしか確認していませんが、どちらも勝手にSubmitされました。

実行例

以下のコードを実行し、一番上にあるテキストボックスでEnterキーを押下するとSubmitされ、ページ遷移されてしまいます。

See the Pen PushEnterSubmit by miko (@miko3) on CodePen.

対処方法

対処方法としてはEnterキーを無効にするか、
特定のクラス名のinputでしかEnterキーを有効にしないかといった感じですかね。
↓のコードはEnterキーを無効にする方法です。

window.onkeydown = function(event) {
  var e = window.event;
  
  if(e.keyCode == 13) {
     return false;
  }  
}

実行例

制御用のJavaScriptを実装したバージョンです。
先ほどと同じくテキストボックスでEnterキーを押下してもSubmitされないはずです。
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”PoWVYaX” default_tab=”html,result” user=”miko3″]See the Pen PushEnterSubmitControl by miko (@miko3) on CodePen.[/codepen_embed]

キー操作については最初の段階で共通部品を作るようにした方が良いですね(:3｣∠)