Enter キーを押したときに Web フォームが送信されないようにするにはどうすればよいですか?

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

Web ベースのアプリケーションを設計する場合、多くの場合、ENTER キーによるフォームの送信を防止することが望ましいです。 。これは JavaScript を使用して実行できます。

解決策:

Revision 2012 (インライン ハンドラー)

関数 checkEnter を定義します。 ENTERを押してくださいkeypress:

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;

これにより、テキストエリアを除くすべての要素の ENTER での送信が防止されます。

改訂 2024 (イベント委任)

その他の実装イベント委任を使用した最新のアプローチ:

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;
    }
  }
}

function logClear(...txt) {
  console.clear();
  console.log(...txt);
}

ENTER で送信する要素に data-enter-for-submit 属性を追加します:

<input data-enter-for-submit="1" 
    placeholder="enter text, try using enter to submit">

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