EditContext: updateSelection() Methode
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.
Die updateSelection()
Methode des EditContext
-Interfaces aktualisiert den internen Zustand der Auswahl innerhalb des bearbeitbaren Textkontexts. Diese Methode wird verwendet, um den Auswahlzustand zu aktualisieren, wenn der Benutzer mit der im EditContext
zugeordneten Element dargestellten Text interagiert, z. B. durch Klicken oder Ziehen der Maus oder durch Nutzung der Tastatur.
Syntax
updateSelection(start, end)
Parameter
Ausnahmen
- Wenn nur ein Argument angegeben wird, wird eine
TypeError
DOMException
ausgelöst. - Wenn ein Argument keine positive Zahl ist, wird eine
DOMException
ausgelöst. - Wenn
start
größer alsend
ist, wird eineDOMException
ausgelöst.
Beispiele
Aktualisierung der Auswahl, wenn der Benutzer mit dem Text interagiert
Dieses Beispiel zeigt, wie die updateSelection
-Methode verwendet wird, um die Auswahl im EditContext
eines canvas
-Elements zu aktualisieren, wenn die Pfeiltasten verwendet werden, um den Cursor zu bewegen oder Text im bearbeitbaren Bereich auszuwählen.
<canvas id="editor-canvas"></canvas>
const canvas = document.getElementById("editor-canvas");
const editContext = new EditContext();
canvas.editContext = editContext;
canvas.addEventListener("keydown", (e) => {
if (e.key == "ArrowLeft") {
const newPosition = Math.max(editContext.selectionStart - 1, 0);
if (e.shiftKey) {
editContext.updateSelection(newPosition, editContext.selectionEnd);
} else {
editContext.updateSelection(newPosition, newPosition);
}
} else if (e.key == "ArrowRight") {
const newPosition = Math.min(
editContext.selectionEnd + 1,
editContext.text.length,
);
if (e.shiftKey) {
editContext.updateSelection(editContext.selectionStart, newPosition);
} else {
editContext.updateSelection(newPosition, newPosition);
}
}
console.log(
`The new EditContext selection is ${editContext.selectionStart}, ${editContext.selectionEnd}`,
);
});
Spezifikationen
Specification |
---|
EditContext API # dom-editcontext-updateselection |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Das
EditContext
-Interface, zu dem es gehört.