Web アプリケーションで Enter キーを押したときの不要なフォームの送信を防ぐにはどうすればよいですか?

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

Web ベースのアプリケーションでは、ENTER キーによって不用意にフォームが送信されると迷惑になる場合があります。このガイドでは、このような望ましくない動作を防ぐためのソリューションを提供します。

解決策 1: カスタム キープレス ハンドラー

カスタム キープレス ハンドラーをフォームに実装して、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 を使用したイベント委任

イベント委任を使用したより現代的なアプローチを使用して、ENTER キーを処理できます。このアプローチには、ドキュメント レベルでイベントをキャプチャし、最も近いフォームの祖先をチェックすることが含まれます。 data-enter-for-submit 属性を持つ指定された要素のみが、ENTER でフォーム送信をトリガーします。

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

追加メモ

• テキストエリアは、その中で Enter を押すなど、別の方法で処理する必要があります。通常、テキストエリアは改行を表します。
• 提供されるコード スニペットはカスタマイズ可能であり、特定のアプリケーションのニーズに適合させることができます。

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