HTMLのformでenterキーによるsubmitを無効にする方法

HTML

HTMLのformでenterキーによるsubmitを無効にする方法

HTMLのformでEnterキーによるsubmitを無効にするには、JavaScriptを使ってEnterキーが押されたときにformのsubmitをキャンセルする方法が一般的です。
formで送信する前に、JavaScriptでデータを加工する場合などに使用される方法です。
以下に、HTMLとJavaScriptを使った実装方法を説明します。

HTMLコード

まず、HTMLのフォームを作成します。
フォーム内に複数の入力フィールドとSubmitボタンを配置します。

<body>
  <form id="test-form" class="test-form">
    <label for="test-input1">Input 1:</label>
    <input type="text" id="test-input1" class="test-input">

    <label for="test-input2">Input 2:</label>
    <input type="text" id="test-input2" class="test-input">

    <button type="submit" class="test-button">Submit</button>
  </form>

  <script src="script.js"></script>
</body>

JavaScriptコード

次に、Enterキーによるsubmitを無効にするJavaScriptコードを記述します。
以下のコードは、フォーム内の入力フィールドでEnterキーが押されたときに、フォームのsubmitをキャンセルします。

// script.js
document.addEventListener('DOMContentLoaded', function () {
  var form = document.getElementById('test-form');

  form.addEventListener('keypress', function (event) {
    if (event.key === 'Enter') {
      event.preventDefault(); // Enterキーによるデフォルトのsubmit動作をキャンセル
    }
  });
});

説明

1. HTMLファイル:
基本的なフォームの構造を提供します。
フォーム内に2つのテキスト入力フィールドと1つのSubmitボタンがあります。

2. JavaScriptファイル:

  • DOMContentLoadedイベントを使って、ページが完全に読み込まれた後にスクリプトが実行されるようにします。
  • getElementByIdメソッドでフォーム要素を取得します。
  • addEventListenerメソッドを使って、フォーム内でkeypressイベントをリッスンします。
  • Enterキーが押された場合、event.preventDefault()メソッドを呼び出して、デフォルトのsubmit動作をキャンセルします。

この方法によって、ユーザーがEnterキーを押してもフォームが送信されないようにすることができます。
フォームのsubmitはボタンをクリックするなど、他の方法で実行されます。