DOM

HTMLInputElement:search イベント

 編集:2022.10.08 by T.A.

[Edge]。→

mdn: 非標準: この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

実際に検索操作([Enter]押下)が行われたときに発行されます。

type が search の場合に有効です。

mdn: search イベントは、<input> 要素の type="search" にて検索が開始されたときに発生します。

バブリング はい
キャンセル可能 いいえ
インターフェイス Event
イベント ハンドラー プロパティ onsearch

mdn: 検索を開始する方法はいくつかあり、例えば、<input> にフォーカスがある時に Enter を押したり、incremental 属性が存在すれば、最も新しいキー入力から UA 定義のタイムアウト時間が経過してから検索が開始されます(新しくキー入力をするとタイムアウトがリセットされるので、イベントが繰り返して発生します)。

mdn: 現在 UA が <input type="search"> を実装している方法では、フィールド内をクリアするために追加のコントロールを置きます。このコントロールを使用しても search イベントが発生します。この場合、<input> 要素の value は空文字列になります。

mdnより
// addEventListener 版
const input = document.querySelector('input[type="search"]');

input.addEventListener('search', () => {
 console.log("The term searched for was " + input.value);
})

// onsearch 版
const input = document.querySelector('input[type="search"]');

input.onsearch = () => {
 console.log("The term searched for was " + input.value);
})

HTML:

検索:<INPUT id=IdTest type=search><BR>
<SPAN id=IdLog></SPAN>

JavaScript:

function Job(eve){  //search イベントの処理:
  D=eve;
  IdLog.innerHTML=IdLog.innerHTML+"●"+IdTest.value+" ";
}
IdTest.onsearch=Job;

テスト