--- title: 'HTMLElement: beforeinput event' slug: Web/API/HTMLElement/beforeinput_event tags: - Event - InputEvent - beforeinput - 事件 - 参考 - 实验性 translation_of: Web/API/HTMLElement/beforeinput_event ---
{{APIRef}} {{SeeCompatTable}}

DOM 事件 beforeinput 在{{HTMLElement("input")}}, {{HTMLElement("select")}} 或 {{HTMLElement("textarea")}} 的值即将被修改前触发。这个事件也可以在 {{domxref("HTMLElement.contentEditable", "contenteditable")}} 被设置为 true 的元素和打开 {{domxref("Document.designMode", "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 {{DOMxRef("InputEvent")}}
Event handler property None
Sync / Async Sync
Composed Yes
Default Action Update the DOM element

示例

这个例子会在 {{HtmlElement("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;
}

结果

规范

规范 状态
{{SpecName('UI Events', "#event-type-beforeinput", "beforeinput event")}} {{Spec2('UI Events')}}

浏览器兼容性

{{Compat("api.HTMLElement.beforeinput_event")}}

参见