HTMLElement: beforeinput event

The DOM beforeinput event fires when the value of an <input>, <select>, or <textarea> element is about to be modified. The event also applies to elements with contenteditable enabled, and to any element when designMode is turned on.

This allows web apps to override text edit behavior before the browser modifies the DOM tree, and provides more control over input events to improve performance.

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

Examples

Feature Detection

The following function returns true if beforeinput, and thus getTargetRanges, is supported.

function isBeforeInputEventAvailable() {
  return window.InputEvent && typeof InputEvent.prototype.getTargetRanges === "function";
}

Simple logger

This example logs the current value of the element, immediately before replacing that value with the new one applied to the <input> element.

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;
}

Result

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
beforeinput_event
Yes
79
87
74-87
No
Yes
Yes
Yes
Yes
87
79-87
Yes
Yes
Yes

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event