The DOMbeforeinput event fires when the value of an<input> or<textarea> element is about to be modified. But in contrast to theinput event, it does not fire on the<select> element. The event also applies to elements withcontenteditable enabled, and to any element whendesignMode 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 ofcontenteditable anddesignMode, the event target is theediting host. If these properties apply to multiple elements, the editing host is the nearest ancestor element whose parent isn't editable.

Syntax

Use the event name in methods likeaddEventListener(), or set an event handler property.

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

Event type

AnInputEvent. Inherits fromUIEvent.

Event properties

This interface inherits properties from its parents,UIEvent andEvent.

InputEvent.dataRead only

Returns a string with the inserted characters. This may be an empty string if the change doesn't insert text (for example, when deleting characters).

InputEvent.dataTransferRead only

Returns aDataTransfer object containing information about richtext or plaintext data being added to or removed from editable content.

InputEvent.inputTypeRead only

Returns the type of change for editable content such as, for example, inserting, deleting, or formatting text.

InputEvent.isComposingRead only

Returns aBoolean value indicating if the event is fired aftercompositionstart and beforecompositionend.

Examples

Feature Detection

The following function returns true ifbeforeinput, and thusgetTargetRanges, 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></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

See also

• Related event:input