Element: input 事件
当用户直接操作 <input>、<select> 或 <textarea> 元素的 value 导致其改变时，会触发 input 事件（例如，在文本框中输入或选中复选框）。
当启用 contenteditable 属性的元素，或在 designMode 开启的任何元素上，也会应用此事件。对于 contenteditable 和 designMode，事件目标是编辑宿主。如果这些属性应用于多个元素，编辑宿主将是其父元素未被编辑的最近的祖先元素。
对于 type=checkbox 或 type=radio 的 <input> 元素，根据 HTML Living Standard 规范，当用户切换控件时，应该会触发 input 事件。然而，历史上这种情况并非总是如此。请检查兼容性，或者对于这些类型的元素，考虑使用 change 事件。
对于接受文本输入的 <textarea> 和 <input> 元素（如 type=text、type=tel 等），接口是 InputEvent；对于其他元素，接口是 Event。
每当元素的 value 改变时，都会触发 input 事件。这与 change 事件不同，后者仅在值已提交时触发，例如通过按下回车键或从选项列表中选择值。请注意，当 JavaScript 以编程方式更改元素的 value 时，不会触发 input 事件。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
addEventListener("input", (event) => { })
oninput = (event) => { }
事件类型
一个 InputEvent。继承自 UIEvent。
事件属性
此接口继承自其父接口 UIEvent 和 Event 的属性。
InputEvent.data只读-
返回一个包含插入字符的字符串。如果更改没有插入文本（例如，删除字符），则此字符串可能为空。
InputEvent.dataTransfer只读-
返回一个
DataTransfer对象，其中包含有关添加到可编辑内容或从中移除的富文本或纯文本数据的信息。 InputEvent.inputType只读-
返回可编辑内容的更改类型，例如，插入、删除或格式化文本。
InputEvent.isComposing只读-
返回一个
Boolean值，指示事件是在compositionstart之后和compositionend之前触发的。
示例
此示例会在您更改 <input> 元素的值时记录该值。
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.target.value;
}
结果
规范
| 规范 |
|---|
| UI 事件 # event-type-input |
| HTML # handler-oninput |
浏览器兼容性
加载中…
另见
- 相关事件