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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
|
---
title: input
slug: Web/API/HTMLElement/input_event
tags:
- HTML DOM
- HTMLElement
- Input
- 事件
- 参考
- 表单
- 输入
translation_of: Web/API/HTMLElement/input_event
original_slug: Web/Events/input
---
<p>{{APIRef}}</p>
<p>当一个 {{HTMLElement("input")}}, {{HTMLElement("select")}}, 或 {{HTMLElement("textarea")}} 元素的 <code>value</code> 被修改时，会触发 <strong><code>input</code></strong> 事件。</p>
<table class="properties">
<tbody>
<tr>
<th scope="row">Bubbles</th>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Cancelable</th>
<td>No</td>
</tr>
<tr>
<th scope="row">Interface</th>
<td>{{DOMxRef("InputEvent")}}</td>
</tr>
<tr>
<th scope="row">Event handler property</th>
<td>{{domxref("GlobalEventHandlers.oninput")}}</td>
</tr>
</tbody>
</table>
<p><strong><code>input</code></strong> 事件也适用于启用了 {{domxref("HTMLElement.contentEditable", "contenteditable")}} 的元素，以及开启了 {{domxref("Document.designMode", "designMode")}} 的任意元素。在<code>contenteditable</code> 和 <code>designMode</code> 的情况下，事件的 target 为当前正在编辑的宿主。如果这些属性应用于多个元素上，当前正在编辑的宿主为最近的父节点不可编辑的祖先元素。</p>
<p>对于 <code>type=checkbox</code> 或 <code>type=radio</code> 的 <code>input</code> 元素，每当用户切换控件（通过触摸、鼠标或键盘）时（<a href="https://html.spec.whatwg.org/multipage/input.html#the-input-element:event-input-2">HTML5规范</a>），<code>input</code> 事件都应该触发。然而，历史事实并非如此。请检查兼容性，或使用 {{event("change")}} 事件代替这些类型的元素。</p>
<div class="blockIndicator note">
<p><strong>注意：</strong> 每当元素的 <code>value</code> 改变，<code>input</code> 事件都会被触发。这与 {{domxref("HTMLInputElement.change_event", "change")}} 事件不同。change 事件仅当 value 被提交时触发，如按回车键，从一个 options 列表中选择一个值等。</p>
</div>
<h2 id="示例">示例</h2>
<p>每当用户修改 {{HtmlElement("input")}} 元素的 value 时，这个示例会记录 value。</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><code><input placeholder="Enter some text" name="name"/>
<p id="values"></p></code></pre>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js"><code>const input = document.querySelector('input');
const log = document.getElementById('values');
input.addEventListener('input', updateValue);
function updateValue(e) {
log.textContent = e.srcElement.value;
}</code>
</pre>
<h3 id="结果">结果</h3>
<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" id="frame_Examples" src="https://mdn.mozillademos.org/en-US/docs/Web/API/HTMLElement/input_event$samples/Examples?revision=1609143"></iframe></p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', "forms.html#event-input-input", "input event")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
</tr>
<tr>
<td>{{SpecName('DOM3 Events', "#event-type-input", "input event")}}</td>
<td>{{Spec2('DOM3 Events')}}</td>
</tr>
</tbody>
</table>
<h2 id="属性">属性</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Property</th>
<th scope="col">Type</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>target</code> {{readonlyInline}}</td>
<td>{{domxref("EventTarget")}}</td>
<td>The event target (the topmost target in the DOM tree).</td>
</tr>
<tr>
<td><code>type</code> {{readonlyInline}}</td>
<td>{{domxref("DOMString")}}</td>
<td>The type of event.</td>
</tr>
<tr>
<td><code>bubbles</code> {{readonlyInline}}</td>
<td>{{jsxref("Boolean")}}</td>
<td>Whether the event normally bubbles or not.</td>
</tr>
<tr>
<td><code>cancelable</code> {{readonlyInline}}</td>
<td>{{jsxref("Boolean")}}</td>
<td>Whether the event is cancellable or not.</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("api.HTMLElement.input_event")}}</p>
<div id="compat-desktop"></div>
<p>[1] 在 Gecko 12.0 {{geckoRelease("12.0")}} 之前，用户在输入法中输入时，或者 dead keys were used on Mac OS X 时，Gecko 不触发 input 事件。</p>
<p>[2] IE 9 在用户删除输入的文字时不触发 input 事件(例如，按 Backspace 或者删除键，或者“剪切”文字).</p>
<p>[3] Opera 在用户把文字拖进输入框时，不触发 input 事件。</p>
<p>[4] 事件 target 是光标所在的最内侧的元素。</p>
<h2 id="参见">参见</h2>
<ul>
<li>{{event("keydown")}}</li>
<li>{{event("keyup")}}</li>
<li>{{event("keypress")}}</li>
<li>{{event("input")}}</li>
<li>{{domxref("HTMLElement/beforeinput_event", "beforeinput")}}</li>
<li>{{domxref("HTMLElement/change_event", "change")}}</li>
<li>{{domxref("HTMLInputElement/invalid_event", "invalid")}}</li>
</ul>
<p>此外，还有一个类似的 <code><a href="https://developer.mozilla.org/en-US/docs/Web/Reference/Events/change">change</a></code> 事件。change 触发的频率低于 <code>input</code> - 它只会在用户提交更改时触发。</p>
<p>
<audio class="hidden"></audio>
</p>
|
