元素：input 事件

当 <input>、<select> 或 <textarea> 元素的 value 由于用户操作（例如在文本框中键入或选中复选框）而直接更改时，input 事件就会触发。

该事件也适用于启用了 contenteditable 的元素，以及在启用 designMode 时任何元素。对于 contenteditable 和 designMode，事件目标是编辑主机。如果这些属性应用于多个元素，编辑主机是其父级不可编辑的最接近的祖先元素。

对于 type=checkbox 或 type=radio 的 <input> 元素，每当用户切换控件时，input 事件应该触发，根据 HTML 生存规范。然而，历史上并非总是如此。检查兼容性，或者对于这些类型的元素，使用 change 事件。

对于接受文本输入的 <textarea> 和 <input> 元素 (type=text, type=tel 等)，其接口为 InputEvent；对于其他元素，其接口为 Event。

每当元素的 value 发生变化时，都会触发 input 事件。这与 change 事件不同，后者仅在提交值时触发，例如按回车键或从选项列表中选择一个值。请注意，当 JavaScript 以编程方式更改元素的 value 时，不会触发 input 事件。

语法

在像 addEventListener() 这样的方法中使用事件名，或者设置事件处理程序属性。

js
addEventListener("input", (event) => {});

oninput = (event) => {};

事件类型

一个 InputEvent。继承自 UIEvent。

Event UIEvent InputEvent

事件属性

此接口继承自其父级 UIEvent 和 Event 的属性。

InputEvent.data 只读

返回一个包含插入字符的字符串。如果更改未插入文本（例如，删除字符时），则这可能是一个空字符串。

InputEvent.dataTransfer 只读

返回一个 DataTransfer 对象，其中包含有关添加到可编辑内容或从中删除的富文本或纯文本数据的信息。

InputEvent.inputType 只读

返回可编辑内容的更改类型，例如插入、删除或格式化文本。

InputEvent.isComposing 只读

返回一个 Boolean 值，指示事件是在 compositionstart 之后且 compositionend 之前触发的。

示例

此示例在您更改 <input> 元素的值时记录该值。

HTML

html
<input placeholder="Enter some text" 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;
}

结果

规范

规范
UI 事件
# event-type-input
HTML 标准
# handler-oninput

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅