Element: beforeinput 事件
DOM 中的 beforeinput 事件会在 <input> 或 <textarea> 元素的值即将被修改时触发。但与 input 事件不同的是，它不会在 <select> 元素上触发。该事件也适用于启用了 contenteditable 的元素，以及在 designMode 开启时的任何元素。
这使得 Web 应用可以在浏览器修改 DOM 树之前覆盖文本编辑行为，并提供对输入事件的更多控制以提高性能。
对于 contenteditable 和 designMode，事件目标是编辑宿主。如果这些属性应用于多个元素，则编辑宿主是其父元素不是可编辑元素的最近的祖先元素。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
js
addEventListener("beforeinput", (event) => { })
onbeforeinput = (event) => { }
事件类型
一个 InputEvent。继承自 UIEvent。
事件属性
此接口继承自其父接口 UIEvent 和 Event 的属性。
InputEvent.data只读-
返回一个包含插入字符的字符串。如果更改没有插入文本（例如，删除字符），则此字符串可能为空。
InputEvent.dataTransfer只读-
返回一个
DataTransfer对象，其中包含有关添加到可编辑内容或从中移除的富文本或纯文本数据的信息。 InputEvent.inputType只读-
返回可编辑内容的更改类型，例如，插入、删除或格式化文本。
InputEvent.isComposing只读-
返回一个
Boolean值，指示事件是在compositionstart之后和compositionend之前触发的。
示例
特性检测
以下函数在支持 beforeinput（从而支持 getTargetRanges）时返回 true。
js
function isBeforeInputEventAvailable() {
return (
window.InputEvent &&
typeof InputEvent.prototype.getTargetRanges === "function"
);
}
简单日志
此示例记录元素当前的值，然后立即用应用于 <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("beforeinput", updateValue);
function updateValue(e) {
log.textContent = e.target.value;
}
结果
规范
| 规范 |
|---|
| UI 事件 # event-type-beforeinput |
浏览器兼容性
加载中…
另见
- 相关事件：
input