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