HTMLElement: beforeinput event

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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.

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


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


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


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

input.addEventListener('beforeinput', updateValue);

function updateValue(e) {
  log.textContent =;



Specification Status
UI Events
The definition of 'beforeinput event' in that specification.
Working Draft

Browser compatibility

ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
beforeinput event
Chrome Full support YesEdge Full support 79Firefox No support NoIE No support NoOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android No support NoOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes


Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

See also