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 January 2020.

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

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

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

对于 type=checkboxtype=radioinput 元素,每当用户切换控件(通过触摸、鼠标或键盘)时(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 Standard
# handler-oninput

浏览器兼容性

BCD tables only load in the browser

参见