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:
Syntax
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.
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.
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