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 2021年3月.
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 |
浏览器兼容性
Loading…
参见
- 相关事件：
input