Enter キーを押したときにフォームが送信されないようにして、代わりにカスタム JavaScript を実行するにはどうすればよいですか?

Enter キーを押したときのフォーム送信の防止

ユーザーがフォーム内で Enter キーを押すと、デフォルトの動作ではフォームが送信されます。ただし、一部のシナリオでは、フォームの送信を防止し、代わりにカスタム JavaScript 関数を実行する必要があります。

これを実現するには、Enter キーの押下を処理するようにフォーム上のイベント リスナーを変更できます。その方法は次のとおりです:

document.querySelector("form").addEventListener("keypress", (e) => {
  if (e.key === "Enter") {
    // Prevent form submission
    e.preventDefault();

    // Call your JavaScript function
    customFunction();
  }
});

function customFunction() {
  // Your custom JavaScript function logic
}

この例では、イベント ハンドラー内で e.preventDefault() を呼び出すことによってフォームの送信が阻止されます。この条件を追加してカスタム関数を呼び出すと、Enter キーでフォームを送信する代わりに、customFunction() がトリガーされます。

注:

最新のブラウザでは、e の使用をお勧めします。 e.keyCode の代わりにキーを使用します。ただし、古いブラウザとの互換性のために、両方の使用が必要になる場合があります。

以上がEnter キーを押したときにフォームが送信されないようにして、代わりにカスタム JavaScript を実行するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。