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

start: A number representing the new selection start.
end: A number representing the new selection end.

If the start and end values are the same, the selection is equivalent to a caret.

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 than end, a DOMException 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.

html

<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