TextUpdateEvent

Limited availability

The TextUpdateEvent interface is a DOM event that represents a text or selection update in an editable text region that’s attached to an EditContext instance.

This interface inherits properties from Event.

Constructor

• TextUpdateEvent() Experimental
  • : Creates a new TextUpdateEvent object.

Instance properties

• updateRangeStart Read only Experimental
  • : Returns the index of the first character in the range of text that was updated.
• updateRangeEnd Read only Experimental
  • : Returns the index of the last character in the range of text that was updated.
• text Read only Experimental
  • : Returns the text that was inserted in the updated range.
• selectionStart Read only Experimental
  • : Returns the index of the first character in the new selection range, after the update.
• selectionEnd Read only Experimental
  • : Returns the index of the last character in the new selection range, after the update.

Examples

Rendering the updated text in an editable canvas

In the following example, the EditContext API is used to render editable text in a <canvas> element, and the textupdate event is used to render the text when the user is typing.

<canvas id="editor-canvas"></canvas>

const canvas = document.getElementById("editor-canvas");
const ctx = canvas.getContext("2d");
const editContext = new EditContext();
canvas.editContext = editContext;

function render() {
  // Clear the canvas.
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Render the text.
  ctx.fillText(editContext.text, 10, 10);
}

editContext.addEventListener("textupdate", (e) => {
  // Re-render the editor view when the user is entering text.
  render();

  console.log(
    `The user entered ${e.text}. Rendering the entire text: ${editContext.text}`,
  );
});

Specifications

Browser compatibility