ホームページ > ウェブフロントエンド > jsチュートリアル > Enter キーを押したときに Web フォームが送信されないようにするにはどうすればよいですか?

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

Patricia Arquette
リリース: 2024-11-17 21:02:02
オリジナル
385 人が閲覧しました

How to Prevent Web Form Submission on ENTER Keypress?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート