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

Syntax

js
getTargetRanges()

Parameter

Keine.

Rückgabewert

Ein Array von StaticRange-Objekten.

Beispiele

Merkmals-Erkennung

Die folgende Funktion gibt true zurück, wenn beforeinput und damit getTargetRanges unterstützt wird.

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

Grundlegende Verwendung

Das folgende Beispiel wählt ein contenteditable-Element aus und nutzt 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);
});

Spezifikationen

Specification
Input Events Level 2
# dom-inputevent-gettargetranges

Browser-Kompatibilität

BCD tables only load in the browser