blob: 21730a143834215b7e58ba27064cca02c2a2bc37 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
---
title: 'HTMLInputElement: search イベント'
slug: Web/API/HTMLInputElement/search_event
tags:
- API
- Event
- HTMLInputElement
- 標準外
- リファレンス
- Search
- ウェブ
browser-compat: api.HTMLInputElement.search_event
translation_of: Web/API/HTMLInputElement/search_event
---
{{APIRef}}{{non-standard_header}}
**`search`** イベントは、 {{HTMLElement("input")}} 要素の `type="search"` にて検索が開始されたときに発生します。
<table class="properties">
<tbody>
<tr>
<th scope="row">バブリング</th>
<td>はい</td>
</tr>
<tr>
<th scope="row">キャンセル</th>
<td>不可</td>
</tr>
<tr>
<th scope="row">インターフェイス</th>
<td>{{domxref("Event")}}</td>
</tr>
<tr>
<th scope="row">イベントハンドラープロパティ</th>
<td>
<code
><a href="/ja/docs/Web/API/GlobalEventHandlers/onsearch"
>onsearch</a
></code
>
</td>
</tr>
</tbody>
</table>
検索を開始する方法はいくつかあり、例えば、 {{HTMLElement("input")}} にフォーカスがある時に <kbd>Enter</kbd> を押したり、[`incremental`](/ja/docs/Web/HTML/Element/input#attr-incremental) 属性が存在すれば、最も新しいキー入力から UA 定義のタイムアウト時間が経過してから検索が開始されます（新しくキー入力をするとタイムアウトがリセットされるので、イベントが繰り返して発生します）。
現在 UA が `<input type="search">` を実装している方法では、フィールド内をクリアするために追加のコントロールを置きます。このコントロールを使用しても `search` イベントが発生します。この場合、 {{HTMLElement("input")}} 要素の `value` は空文字列になります。
## 例
```js
// 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);
})
```
## 仕様書
このイベントは仕様書に含まれていません。
## ブラウザーの互換性
{{Compat}}
|
