Enter キーによるフォームの送信を防ぐにはどうすればよいですか?-jsチュートリアル-php.cn

Enter キーによるフォームの送信を防ぐにはどうすればよいですか?

Barbara Streisand

リリース： 2024-11-07 18:50:03

オリジナル

934 人が閲覧しました

How to Prevent Form Submission with the ENTER Key?

ENTER キーによる Web フォームの送信を防止する

ENTER キーを押してフォームの送信をトリガーしないようにすることは、Web 開発における一般的な要件です。 Web ベースのアプリケーションでこの動作を実装する方法は次のとおりです。

解決策:

テキストエリアの動作を維持しながら、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;

ログイン後にコピー

代替アプローチ (モダン):

よりモダンイベント委任を使用したアプローチは次のとおりです。

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

ログイン後にコピー

この場合、HTML 要素に data-enter-for-submit="1" の注釈を付けて、ENTER ベースのフォーム送信を選択的に許可できます。

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