ホームページ > 記事 > ウェブフロントエンド > Web アプリケーションで Enter キーを押したときの不要なフォームの送信を防ぐにはどうすればよいですか?
Web ベースのアプリケーションでは、ENTER キーによって不用意にフォームが送信されると迷惑になる場合があります。このガイドでは、このような望ましくない動作を防ぐためのソリューションを提供します。
カスタム キープレス ハンドラーをフォームに実装して、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;
イベント委任を使用したより現代的なアプローチを使用して、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; } } }
以上がWeb アプリケーションで Enter キーを押したときの不要なフォームの送信を防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。