InputEvent: getTargetRanges() Methode

Baseline Widely available

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

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

Syntax

js
getTargetRanges()

Parameter

Keine.

Rückgabewert

Ein Array von StaticRange-Objekten.

Beispiele

Feature-Erkennung

Die folgende Funktion gibt true zurück, wenn beforeinput, und somit 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 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);
});

Spezifikationen

Specification
Input Events Level 2
# dom-inputevent-gettargetranges

Browser-Kompatibilität