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

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

事象

formタグ内に1行テキストボックスが1つしか存在しない場合において、
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されないはずです。

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


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

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください