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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
getTargetRanges

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support