はじめに
こんにちは。株式会社インプルの奈良です。
今回は、JavaScriptを用いて、キーボードのエンターキー押下時の送信処理を無効にする方法について記載します。
前提となる処理について
webアプリを作成した際に、キーワード検索欄等のインプットボックスを作成することがあります。
<input class="input-search" type="search" id="search-input" placeholder="キーワード検索" name="search-item" value="">これらのフォームをクリックし、文字を入力した後にエンターキーを押下すると、指定された送信処理や登録処理が発生します。
エンターキー押下を無効化するサンプルコード
このエンターキーを押下することで発生する送信処理を防ぎたいケース（別途で作成したボタンの押下時のみ送信処理を発生させたい場合など）では、下記のようなコードが有効になります。
document.onkeypress = function (e) {
// エンターキー押下を無効化する
if (e.key === 'Enter') {
return false;
}
}ChatGPTによる解説
せっかくなので、最近何かと話題のChatGPTに上記コードを解説して頂きました。
コードの解説やリファクタリングをしてくれるのがとても助かりますね！
このJavaScriptコードは、
documentオブジェクトのkeypressイベントにイベントリスナーをバインドします。ドキュメントがフォーカスを持っているときにキーボードでキーが押されると、このイベントリスナーがトリガーされます。この特定のコードでは、イベントリスナーは押されたキーが「Enter」キーであるかどうかを確認します。もしそうなら、関数は
falseを返します。これにより、「Enter」キーのデフォルトの動作が無効になり、フォームを送信したり、コンテキストに応じて他のデフォルトの動作を実行することができなくなります。要約すると、このコードは、
keypressイベントをキャプチャして、「Enter」キーが検出されたときにデフォルトの動作を防止することによって、「Enter」キーが押されたときにフォームを送信したり、他のデフォルトのアクションを実行することを防止します。
初投稿につき初歩的な内容ですが、少しでもお役に立てれば幸いです！