当一个 <input>, <select>, 或 <textarea> 元素的 value 被修改时,会触发 input 事件。

Bubbles Yes
Cancelable No
Interface InputEvent
Event handler property GlobalEventHandlers.oninput

input 事件也适用于启用了 contenteditable 的元素,以及开启了 designMode 的任意元素。在contenteditable 和 designMode 的情况下,事件的 target 为当前正在编辑的宿主。如果这些属性应用于多个元素上,当前正在编辑的宿主为最近的父节点不可编辑的祖先元素。

对于 type=checkboxtype=radioinput 元素,每当用户切换控件(通过触摸、鼠标或键盘)时(HTML5规范),input 事件都应该触发。然而,历史事实并非如此。请检查兼容性,或使用 change 事件代替这些类型的元素。

注: 每当元素的 value 改变,input 事件都会被触发。这与 change 事件不同。change 事件仅当 value 被提交时触发,如按回车键,从一个 options 列表中选择一个值等。

示例

每当用户修改 <input> 元素的 value 时,这个示例会记录 value。

HTML

<input placeholder="Enter some text" name="name"/>
<p id="values"></p>

JavaScript

const input = document.querySelector('input');
const log = document.getElementById('values');

input.addEventListener('input', updateValue);

function updateValue(e) {
  log.textContent = e.srcElement.value;
}

Result

规范

Specification Status
HTML Living Standard
input event
Living Standard
Document Object Model (DOM) Level 3 Events Specification
input event
Obsolete

属性

Property Type Description
target 只读 EventTarget The event target (the topmost target in the DOM tree).
type 只读 DOMString The type of event.
bubbles 只读 Boolean Whether the event normally bubbles or not.
cancelable 只读 Boolean Whether the event is cancellable or not.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
input eventChrome Full support YesEdge Partial support Partial
Notes
Partial support Partial
Notes
Notes Not supported on select, checkbox, or radio inputs.
Firefox Full support YesIE Partial support 9
Notes
Partial support 9
Notes
Notes Only supports input of type text and password.
Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android ? Safari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
Partial support  
Partial support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

[1] 在 Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9) 之前,用户在输入法中输入时,或者 dead keys were used on Mac OS X 时,Gecko 不触发 input 事件。

[2] IE 9 在用户删除输入的文字时不触发 input 事件(例如,按 Backspace 或者删除键,或者“剪切”文字).

[3] Opera 在用户把文字拖进输入框时,不触发 input 事件。

[4] 事件 target 是光标所在的最内侧的元素。

参见

此外, change 事件是相关的。change 触发的频率少于 input - 它只会在用户提交更改时触发。

文档标签和贡献者

最后编辑者: Freezer,