JavaScript | 検索フォームの入力イベントを実装する方法

2023-02-27JavaScript イベント,JavaScript

JavaScript | 検索フォームの入力イベントを実装する方法

JavaScriptで検索フォームへの入力をトリガーにした発火イベントの実装サンプルで「いずれかのキーが離された時」「Enterキーが押された時」「submitボタンが押された時」の3パターンのサンプルコードを紹介しています。

検索フォームの入力イベント

検索フォームの入力イベントの動作サンプルと、そのJavaScriptのサンプルコードになります。

See the Pen JavaScript | addEventListener Drag and Drop Event by yochans (@yochans) on CodePen.

このサンプルコードではHTMLに検索窓用のsearchフォーム、検索ボタン用のsubmitボタンを設置しています。
pタグの部分は、動作テストの出力用部分です。

<div class="container">
	<input type="search" name="search" placeholder="検索">
	<input type="submit" name="submit" value="検索">
</div>

<p>いずれかのキーが離された時:<span id="output1"></span></p>
<p>Enterが押された時:<span id="output2"></span></p>
<p>submitボタンが押された時:<span id="output3"></span></p>

いずれかのキーが離された時、Enterキーが押された時、submitボタンが押された時の3アクションのイベントサンプルコードになります。
全てaddEventListener()メソッドを利用しています。

HTML要素の取得にはdocument.querySelector()を利用、idやclass名があればgetelementbyid()などでも良いでしょう。
関連:JavaScript | querySelector()とquerySelectorAll()の使い方、指定方法まとめ | ONE NOTES

let search = document.querySelector(`input[name='search']`);
let submit = document.querySelector(`input[name='submit']`);

// いずれかのキーが離された時
search.addEventListener('keyup', function () {
	document.querySelector(`#output1`).innerHTML = search.value;
});

// Enterキーが押された時
search.addEventListener('change', function () {
	document.querySelector(`#output2`).innerHTML = search.value;
});

// submitボタンが押された時
submit.addEventListener('click', function () {
	document.querySelector(`#output3`).innerHTML = search.value;
});

※基本的にEnterキーやsubmitボタンの入力は検索時にページ遷移は行わない検索窓の場合に有効です。

以下はは上記サンプルコードのアロー関数バージョンになります。

let search = document.querySelector(`input[name='search']`);
let submit = document.querySelector(`input[name='submit']`);

// いずれかのキーが離された時
search.addEventListener('keyup', () => {
	document.querySelector(`#output1`).innerHTML = search.value;
});

// Enterキーが押された時
search.addEventListener('change', () => {
	document.querySelector(`#output2`).innerHTML = search.value;
});

// submitボタンが押された時
submit.addEventListener('click', () => {
	document.querySelector(`#output3`).innerHTML = search.value;
});