input
event fires when the
value
of an
<input>
,
<select>
,或
<textarea>
元素已改变。
| 冒泡 | Yes |
|---|---|
| 可取消 | No |
| 接口 |
InputEvent
|
| 事件处理程序特性 |
GlobalEventHandlers.oninput
|
The event also applies to elements with
contenteditable
enabled, and to any element when
designMode
is turned on. In the case of
contenteditable
and
designMode
, the event target is the
editing host
. If these properties apply to multiple elements, the editing host is the nearest ancestor element whose parent isn't editable.
For
<input>
elements with
type=checkbox
or
type=radio
,
input
event should fire whenever a user toggles the control, per
the HTML5 specification
. However, historically this has not always been the case. Check compatibility, or use the
change
event instead for elements of these types.
注意:
input
event is fired every time the
value
of the element changes. This is unlike the
change
event, which only fires when the value is committed, such as by pressing the enter key, selecting a value from a list of options, and the like.
This example logs the value whenever you change the value of the
<input>
元素。
<input placeholder="Enter some text" name="name"/> <p id="values"></p>
const input = document.querySelector('input');
const log = document.getElementById('values');
input.addEventListener('input', updateValue);
function updateValue(e) {
log.textContent = e.target.value;
}
| 规范 | 状态 |
|---|---|
|
HTML 实时标准
The definition of 'input event' in that specification. |
实时标准 |
|
DOM (文档对象模型) 3 级事件规范
The definition of 'input event' in that specification. |
过时 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
input
event
|
Chrome 1 |
Edge
79
|
Firefox 6 |
IE
部分支持
9
|
Opera 11.6 | Safari 3.1 | WebView Android 1 | Chrome Android 18 | Firefox Android 6 | Opera Android 12 | Safari iOS 2 | Samsung Internet Android 1.0 |
完整支持
部分支持
见实现注意事项。
HTMLElement
contentEditable
contextMenu
dir
hidden
innerText
isContentEditable
lang
offsetHeight
offsetLeft
offsetParent
offsetTop
offsetWidth
onabort
onanimationcancel
onanimationend
onanimationiteration
onauxclick
onblur
oncancel
oncanplay
oncanplaythrough
onchange
onclick
onclose
oncontextmenu
oncopy
oncuechange
oncut
ondblclick
ondurationchange
onended
onerror
onfocus
onformdata
ongotpointercapture
oninput
oninvalid
onkeydown
onkeypress
onkeyup
onload
onloadeddata
onloadedmetadata
onloadend
onloadstart
onlostpointercapture
onmousedown
onmouseenter
onmouseleave
onmousemove
onmouseout
onmouseover
onmouseup
onpaste
onpause
onplay
onplaying
onpointercancel
onpointerdown
onpointerenter
onpointerleave
onpointermove
onpointerout
onpointerover
onpointerup
onreset
onresize
onscroll
onselect
onselectionchange
onselectstart
onsubmit
ontouchcancel
ontouchstart
ontransitioncancel
ontransitionend
onwheel
outerText
title