Element: beforeinput event

Syntax

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

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

onbeforeinput = (event) => { }

Event type

An InputEvent. Inherits from UIEvent.

Event properties

This interface inherits properties from its parents, UIEvent and Event.

InputEvent.data Read 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.dataTransfer Read only

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

InputEvent.inputType Read only

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

InputEvent.isComposing Read only

Returns a Boolean value indicating if the event is fired after compositionstart and before compositionend.

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

See also

• Related event: input