The DOM beforeinput event fires when the value of an <input>, 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.
Use the event name in methods like addEventListener(), or set an event handler property.
addEventListener("beforeinput", (event) => {});
onbeforeinput = (event) => {};
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.
The following function returns true if beforeinput, and thus getTargetRanges, is supported.
function isBeforeInputEventAvailable() {
return (
window.InputEvent &&
typeof InputEvent.prototype.getTargetRanges === "function"
);
}
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