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

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

checkEnter 関数を使用するには、キー押下ハンドラーとしてフォームに添付できます。

<form [...] onkeypress="return checkEnter(event)">

あるいは、以下の ES20xx アプローチ:

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 キーが押されたときにフォームの送信を防止し、ユーザーが送信をトリガーせずに textarea 要素に複数行のテキストを入力できるようにします。

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