zukucode
主にWEB関連の情報を技術メモとして発信しています。

JavaScript EnterキーでのSubmitを無効にする方法

エンター(Enter)キーを押したときにフォーム(Form)を送信(Submit)するのをJavaScriptで向こうにする方法を紹介します。

エンターキーが押されたかどうかの判定はkeydownイベントで行います。

そのため、まずは制御したいフォームのコントロールにkeydownのイベントを定義します。

// 対象のフォームコントロールを取得
const form = document.getElementById('form1');

// フォームのkeydownイベントを設定
form.addEventListener('keydown', function (event) {
});

keydownイベントのパラメータeventに押されたキーの情報があります。

event.keyCodeでキーの情報を取得できます。

エンターキーが押された場合はevent.keyCode13がセットされていますので、この値が13かどうかでエンターキーが押されたかどうかを判定します。

// 対象のフォームコントロールを取得
const form = document.getElementById('form1');

// フォームのkeydownイベントを設定
form.addEventListener('keydown', function (event) {
  if (event.keyCode === 13) {
    // エンターキーが押されたときの動作
  }
});

keydownのイベントをreturn falseで終了すればイベントは無効になります。

エンターキーの場合はイベントを無効にしますが、submitボタン上でエンターキーを押したときや、テキストエリアで入力中にエンターキーを押して改行したい場合などは、エンターキーのイベントは有効にする必要があります。

event.srcElementでイベントの発生元の情報が取得できます。

event.srcElement.typesubmittextarea以外の場合のみイベントをキャンセルするようにします。

最終的には以下のようになります。

// 対象のフォームコントロールを取得
const form = document.getElementById('form1');

// フォームのkeydownイベントを設定
form.addEventListener('keydown', function (event) {
  if (event.keyCode === 13) {
    // エンターキーが押されたときの動作
    if (event.srcElement.type != 'submit' && 
      event.srcElement.type != 'textarea') {
      // submitボタン、テキストエリア以外の場合はイベントをキャンセル
      return false;
    }
  }
});


関連記事