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