JavaScript Enterを押して送信しないでください

Web 開発において、JavaScript は不可欠なプログラミング言語です。多くの場合、特定のインタラクティブ効果を実現するには、Enter キーなどのユーザー操作をキャプチャする必要があります。ただし、Enter キーによるデフォルトのフォーム送信動作を実行したくない場合があります。この場合はどうすればよいでしょうか?この記事では、JavaScript を使用して Enter キーのデフォルトの送信イベントを防止する方法を紹介します。

Enter キーのデフォルトの動作

ほとんどの Web フォームでは、ユーザーが 1 行のテキスト ボックスで Enter キーを押すと、フォームが自動的に送信されます。これはブラウザに付属するデフォルトの動作であり、単純な検索ボックスなどの一部の対話型効果には適さない場合があります。ユーザーが検索ボックスにキーワードを入力して Enter キーを押すと、デフォルトの送信動作が防止されない場合、ブラウザーは自動的にページを更新し、ユーザーが入力したキーワードは失われます。

Enter キーのデフォルトの送信イベントを防止する

Enter キーのデフォルトの送信イベントを防止するには、JavaScript でevent.preventDefault() メソッドを使用できます。このメソッドは、フォームのデフォルトの送信イベントの防止など、要素のデフォルトの動作を防止できます。

次の HTML コードがあるとします。

次の JavaScript コードを使用して、Enter キーのデフォルトのフォーム送信イベントを防ぐことができます。

const searchInput = document.querySelector('#search-input');
searchInput.addEventListener('keydown', (event) => {
  if (event.keyCode === 13) {
    event.preventDefault();
    console.log('阻止回车键默认提交事件');
  }
});

上記のコードでは, ユーザーがキーボードを押したときにトリガーされる keydown イベント リスナーを入力ボックスに追加しました。イベント ハンドラーでは、ユーザーが Enter キーを押したかどうかを判断し、押した場合は、event.preventDefault() を呼び出してフォームのデフォルトの送信イベントを防止します。同時にコンソールにメッセージを出力し、コードが有効かどうかを確認します。

フォームのデフォルトの送信イベントを防ぐことに加えて、event.preventDefault() メソッドの後に独自の JavaScript コードを実行して、特定のインタラクティブな効果を実現することもできます。

その他の注意事項

Enter キーがイベントを送信できないように実装する場合は、次の点に注意する必要があります。

1. event.preventDefault() メソッドイベントのみを処理します。 プログラム内のデフォルトの動作が有効ですが、メソッドがイベント ハンドラーの外部で呼び出された場合、効果はありません。
2. keydown イベントでは、event.keyCode を通じてユーザーが押したキー コードを取得できます。Enter キーのキー コードは 13 です。
3. フォームを正常に送信できるようにしながら、検索ボックスで Enter キーのロジックを処理する必要がある場合など、場合によっては、イベント バブリングを通じてこの問題を解決できます。検索ボックスの keydown イベント ハンドラーで、デフォルトの動作を防止しないと、イベントがフォーム要素にバブルアップされ、それによってフォームのデフォルトの送信イベントがトリガーされます。したがって、フォーム要素に送信イベント リスナーを追加し、フォームの送信時に独自のコードを実行できます。

const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
  event.preventDefault();
  console.log('表单被提交！');
})

結論

JavaScript は、デフォルトで Enter キーによるイベントの送信を簡単に防止できるため、より自由なインタラクション効果を実現できます。必要なインタラクティブな効果を実現するために、event.preventDefault() メソッドを通じてフォームのデフォルトの動作を防ぐことができます。同時に、予期しないエラーを避けるために、イベント ハンドラーのデフォルトの動作を防止するタイミングと方法にも注意する必要があります。

以上がJavaScript Enterを押して送信しないでくださいの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。