Element: beforeinput event
The DOM beforeinput
event fires when the value of an <input>
or <textarea>
element is about to be modified. But in contrast to the input
event, it does not fire on the <select>
element. 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.
Note: Not every user modification results in beforeinput
firing. Also the event may fire but be non-cancelable. This may happen when the modification is done by autocomplete, by accepting a correction from a spell checker, by password manager autofill, by IME, or in other ways. The details vary by browser and OS. To override the edit behavior in all situations, the code needs to handle the input
event and possibly revert any modifications that were not handled by the beforeinput
handler. See bugs 1673558 and 1763669.
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 aftercompositionstart
and beforecompositionend
.
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
Specification |
---|
UI Events # event-type-beforeinput |
Browser compatibility
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
See also
- Related event:
input