InputEvent: getTargetRanges() Methode

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2021 browserübergreifend verfügbar.

Die getTargetRanges()-Methode 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 zur Verbesserung der Leistung.

Abhängig vom 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 verbleibenden	contenteditable	ein Array von [`StaticRange`](/de/docs/Web/API/StaticRange) Objekten, die mit dem Ereignis verbunden sind
Alle verbleibenden	input oder textarea	ein leeres Array

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

Grundlegende Verwendung

Das folgende Beispiel wählt ein contenteditable Element aus und verwendet das beforeinput Ereignis, um das Ergebnis von getTargetRanges() zu protokollieren.

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

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