EditContext: updateSelection() method
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The updateSelection()
method of the EditContext
interface updates the internal state of the selection within the editable text context. This method is used to update the selection state when the user interacts with the text rendering in the EditContext
's associated element, such as by clicking or dragging the mouse, or by using the keyboard.
Syntax
updateSelection(start, end)
Parameters
Exceptions
- If only one argument is provided, a
TypeError
DOMException
is thrown. - If either argument is not a positive number, a
DOMException
is thrown. - If
start
is greater thanend
, aDOMException
is thrown.
Examples
Updating the selection when the user interacts with the text
This example shows how to use the updateSelection
method to update the selection in the EditContext
of a canvas
element when the arrow keys are used to move the caret or select text in the editable region.
<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}`,
);
});
Specifications
Specification |
---|
EditContext API # dom-editcontext-updateselection |
Browser compatibility
BCD tables only load in the browser
See also
- The
EditContext
interface it belongs to.