The getTargetRanges()
method of the InputEvent
interface returns an array of static ranges that will be affected by a change to the DOM if the input event is not canceled.
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.
An array of StaticRange
objects.
The following function returns true if beforeinput
, and thus getTargetRanges
, is supported.
function isBeforeInputEventAvailable() {
return (
window.InputEvent &&
typeof InputEvent.prototype.getTargetRanges === "function"
);
}
The following example selects a contenteditable
element and utilizes the beforeinput
event to log the result of getTargetRanges()
.
const editableElem = document.querySelector('[contenteditable="true"]');
editableElem.addEventListener("beforeinput", (e) => {
const targetRanges = e.getTargetRanges();
console.log(targetRanges);
});