input

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

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

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

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

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

示例

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

HTML

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;
}

结果

属性

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.