InputEvent: Methode getTargetRanges()

Die Methode getTargetRanges() der InputEvent-Schnittstelle gibt ein Array von StaticRange-Objekten zurück, die von einer Änderung des DOM betroffen sein werden, wenn das Eingabeereignis nicht abgebrochen wird.

Dies ermöglicht es Webanwendungen, das Textbearbeitungsverhalten zu überschreiben, bevor der Browser den DOM-Baum ändert, und bietet mehr Kontrolle über Eingabeereignisse, um die Leistung zu verbessern.

Je nach Wert von inputType und dem aktuellen Bearbeitungshost variiert der erwartete Rückgabewert dieser Methode:

inputType	Bearbeitungshost	Antwort von getTargetRanges()
"historyUndo" oder "historyRedo"	Beliebig	leeres Array
Alle übrigen	contenteditable	ein Array von [`StaticRange`](/de/docs/Web/API/StaticRange)- Objekten, die mit dem Ereignis verbunden sind
Alle übrigen	input oder textarea	ein leeres 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);
});