JavaScriptでEnterキーを無効化する方法（非jQuery）

Javascriptで、フォーム上でEnterキーが押された時にSubmitされる現象を回避する方法を紹介します。

はじめに

HTML標準の動きでは、<form>タグの中にあるテキストボックスなどでEnterキーを押すと、それを囲っている<form>タグのsubmitが発生します。

ログイン画面ような、パスワードを入力したらEnterキーで素早くsubmitできた方がいい画面もある一方、入力フォームなどでは誤って誤送信する懸念もあります。

そこで、JavascirptでEnterを無効化し、勝手にsubmitされないように制御する方法を紹介します。
この記事で紹介するJavascriptのコードは、jQueryなどの外部のライブラリは使用しません。

Enterキーでのsubmitを無効化する方法

以下は、ドキュメント全体でキーが押された時のイベントを検知し、Enterキーが押された場合は、preventDefault()でイベントを無効化するコードです。

  document.addEventListener("keypress", (e) => {
    // エンターキーを無効にする
    if (e.key === 'Enter') {
      e.preventDefault()
    }
  })

ちなみに、preventDefault()はイベントの標準的な動作を無効化するための関数です。keypress イベント以外にも、例えば mousedown イベントでpreventDefault()を呼び出すと、マウスイベントを無効化することも可能です。

textarea・buttonなど、一部の要素でEnterキーを許可する

前述のコードは、ドキュメント上で発生するすべてのEnterキーのイベントを無効化します。
そのため、次のケースでもEnterキーが無効化されます。

• textarea上でEnterキーを押した時の改行
• button上でEnterキーを押した時のclickイベント

特にtextareaで改行できなくなるのは致命的な問題なので、対処が必要です。

問題を改善したコードが以下です。このコードは、textareaまたはbutton上でEnterキーが押された場合は、通常どおりイベントを処理し、それ以外の要素ではEnterキーを無効化しています。

  document.addEventListener("keypress", (e) => {
    // TTEXTAREA OR BUTTONは無効化しない
    if (e.target.tagName === 'TEXTAREA' || e.target.tagName === 'BUTTON') {
      return true
    }
    // エンターキーだったら無効にする
    if (e.key === 'Enter') {
      e.preventDefault()
    }
  })

まとめ

この記事では、JavaScriptを使用してフォーム内でEnterキーを押した際に自動的にsubmitされる標準動作を無効化する方法を解説しました。これにより、ユーザーが誤ってEnterキーを押してしまった際の誤送信を防ぐことができます。具体的には、document.addEventListenerを使ってキーイベントを検知し、Enterキーが押された際にpreventDefault()メソッドを呼び出して標準動作を無効化する方法を紹介しました。