Enter キーを押したときにフォームの送信を停止するにはどうすればよいですか?

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

Web アプリケーションでは、フォームの送信に ENTER キーがよく使用されます。ただし、ENTER キーを押してもフォームが送信されないようにしたい場合があります。これを実現する 2 つの方法を以下に示します。

方法 1: Onkeypress ハンドラー

このメソッドは、フォーム上で onkeypress イベント ハンドラーを使用します。押されたキーがENTER（キーコード13）かどうかをチェックする関数を作成し、ENTER以外の場合のみフォームの送信を許可することで、即時フォームの送信を防ぐことができます。このアプローチのコードは次のとおりです。

function checkEnter(e) {
  e = e || event;
  var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
  return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
}
document.querySelector('form').onkeypress = checkEnter;

方法 2: 最新の JavaScript を使用したイベント委任

ES20xx とイベント委任を使用したより現代的なアプローチには、キー押下リスナーの設定が含まれます。文書全体に。このメソッドは、ターゲット入力を含むフォームに、ENTER キーを押してフォームを送信する必要があることを示す特別な属性があるかどうかを確認します。関連する JavaScript および HTML コード:

document.addEventListener(`keypress`, handle);

function handle(evt) {
  const form = evt.target.closest(`#testForm`);
  if (form) {
    if (evt.target.dataset.enterForSubmit) {
      if (evt.key === `Enter`) {
        evt.preventDefault();
        return logClear(`won't submit "${evt.target.value}"`);
      }
      return true;
    }
  }
}

<form>

これらのメソッドはどちらも、ENTER キーを押したときにフォームが送信されるのを効果的に防ぎながら、改行に ENTER を自然に使用するテキストエリア入力を正常に機能させます。

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