Element：input 事件
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
当一个 <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 事件不同。change 事件仅当 value 被提交时触发，如按回车键，从一个 options 列表中选择一个值等。
示例
每当用户修改 <input> 元素的 value 时，这个示例会记录 value。
HTML
html
<input placeholder="输入一些文本" name="name" />
<p id="values"></p>
JavaScript
js
const input = document.querySelector("input");
const log = document.getElementById("values");
input.addEventListener("input", updateValue);
function updateValue(e) {
log.textContent = e.target.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. |
规范
| Specification |
|---|
| UI Events # event-type-input |
| HTML # handler-oninput |
浏览器兼容性
Loading…
参见
- 相关事件