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

参见