元素：beforeinput 事件

DOM beforeinput 事件在 <input> 或 <textarea> 元素的值即将被修改时触发。但与 input 事件不同，它不会在 <select> 元素上触发。该事件也适用于启用了 contenteditable 的元素，以及在 designMode 启用时任何元素。

这使 Web 应用程序能够在浏览器修改 DOM 树之前覆盖文本编辑行为，并提供对输入事件的更多控制，从而提高性能。

在 contenteditable 和 designMode 的情况下，事件目标是**编辑宿主**。如果这些属性应用于多个元素，则编辑宿主是其父元素不可编辑的最近祖先元素。

注意：并非所有用户修改都会触发 beforeinput 事件。此外，事件可能会触发但不可取消。这可能会在修改由自动完成、接受拼写检查器的更正、密码管理器自动填充、IME 或其他方式完成时发生。具体细节因浏览器和操作系统而异。要覆盖所有情况下的编辑行为，代码需要处理 input 事件，并可能撤消未由 beforeinput 处理程序处理的任何修改。请参见错误 1673558 和 1763669。

语法

在诸如 addEventListener() 的方法中使用事件名称，或设置事件处理程序属性。

addEventListener("beforeinput", (event) => {});

onbeforeinput = (event) => {};

事件类型

一个 InputEvent。继承自 UIEvent。

事件属性

此接口继承了其父级 UIEvent 和 Event 的属性。

InputEvent.data 只读: 返回包含插入字符的字符串。如果更改没有插入文本（例如，删除字符），则可能为空字符串。
InputEvent.dataTransfer 只读: 返回一个 DataTransfer 对象，其中包含有关添加到或从可编辑内容中删除的富文本或纯文本数据的信息。
InputEvent.inputType 只读: 返回可编辑内容的更改类型，例如插入、删除或格式化文本。
InputEvent.isComposing 只读: 返回一个 Boolean 值，指示事件是在 compositionstart 之后和 compositionend 之前触发的。

示例

功能检测

以下函数在 beforeinput（以及 getTargetRanges）支持时返回 true。

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

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

浏览器兼容性

BCD 表仅在浏览器中加载

另请参见

相关事件： input