InputEvent: getTargetRanges() method
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2021.
ThegetTargetRanges() method of theInputEvent interface returns an array ofStaticRange objects 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.
Depending on the value ofinputType and the current editing host, the expected return value of this method varies:
| inputType | Editing host | Response ofgetTargetRanges() |
|---|---|---|
"historyUndo" or"historyRedo" | Any | empty Array |
| All remaining | contenteditable | an Array ofStaticRange objects associated with event |
| All remaining | input ortextarea | an empty Array |
Syntax
getTargetRanges()Parameters
None.
Return value
An array ofStaticRange objects.
Examples
Feature Detection
The following function returns true ifbeforeinput, and thusgetTargetRanges, is supported.
function isBeforeInputEventAvailable() { return ( window.InputEvent && typeof InputEvent.prototype.getTargetRanges === "function" );}Basic usage
The following example selects acontenteditable element and utilizes thebeforeinputevent to log the result ofgetTargetRanges().
const editableElem = document.querySelector('[contenteditable="true"]');editableElem.addEventListener("beforeinput", (e) => { const targetRanges = e.getTargetRanges(); console.log(targetRanges);});Specifications
| Specification |
|---|
| Input Events Level 2 # dom-inputevent-gettargetranges |