EditContext: updateSelection() method

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

See full compatibility

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.

Return value

None (undefined).

Exceptions

TypeError: Thrown if the method is called with fewer than two arguments, or if either argument is not a non-negative number.

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

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`updateSelection` Experimental	Chrome – Full support Chrome 121 (Release date: 2024-01-23) footnote Full support	Edge – Full support Edge 121 (Release date: 2024-01-25) footnote Full support	Firefox – No support Firefox footnote No support	Opera – Full support Opera 107 (Release date: 2024-02-07) footnote Full support	Safari – No support Safari footnote No support	Chrome Android – Full support Chrome Android 121 (Release date: 2024-01-23) footnote Full support	Firefox for Android – No support Firefox for Android footnote No support	Opera Android – Full support Opera Android 81 (Release date: 2024-03-14) footnote Full support	Safari on iOS – No support Safari on iOS footnote No support	Samsung Internet – Full support Samsung Internet 25 (Release date: 2024-04-24) footnote Full support	WebView Android – Full support WebView Android 121 (Release date: 2024-01-23) footnote Full support	WebView on iOS – No support WebView on iOS footnote No support

Tip: you can click/tap on a cell for more information.

Full support: Full support
No support: No support
: Experimental. Expect behavior to change in the future.

EditContext: updateSelection() method

Legend