Element:beforeinput 事件
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.
DOM 事件 beforeinput
在<input>
, <select>
或 <textarea>
的值即将被修改前触发。这个事件也可以在 contenteditable
被设置为 true
的元素和打开 designMode
后的任何元素上被触发。
In the case of contenteditable
and designMode
, the event target is the editing host. If these properties apply to multiple elements, the editing host is the nearest ancestor element whose parent isn't editable.
Bubbles | Yes |
---|---|
Cancelable | Yes |
Interface | InputEvent |
Event handler property | None |
Sync / Async | Sync |
Composed | Yes |
Default Action | Update the DOM element |
示例
这个例子会在 <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;
}
结果
规范
Specification |
---|
UI Events # event-type-beforeinput |
浏览器兼容性
BCD tables only load in the browser
参见
- 相关事件:
input