HTMLElement: beforeinput event

Experimental

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

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

<input placeholder="Enter some text" name="name"/>
<p id="values"></p>

JavaScript

const input = document.querySelector('input');
const log = document.getElementById('values');

input.addEventListener('beforeinput', updateValue);

function updateValue(e) {
  log.textContent = e.target.value;
}

结果

规范

规范 状态
UI Events
beforeinput event
Working Draft

浏览器兼容性

BCD tables only load in the browser

参见