InputEvent: Methode getTargetRanges()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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