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 März 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
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.
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.
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
Loading…