InputEvent: getTargetRanges() method

The getTargetRanges() method of the InputEvent interface returns an array of StaticRange 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 of inputType and the current editing host, the expected return value of this method varies:

inputType	Editing host	Response of getTargetRanges()
"historyUndo" or "historyRedo"	Any	empty Array
All remaining	contenteditable	an Array of StaticRange objects associated with event
All remaining	input or textarea	an empty Array

getTargetRanges()

function isBeforeInputEventAvailable() {
  return (
    window.InputEvent &&
    typeof InputEvent.prototype.getTargetRanges === "function"
  );
}

const editableElem = document.querySelector('[contenteditable="true"]');

editableElem.addEventListener("beforeinput", (e) => {
  const targetRanges = e.getTargetRanges();
  console.log(targetRanges);
});