TextUpdateEvent

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 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

TextUpdateEvent.updateRangeStart Read only Experimental: Returns the index of the first character in the range of text that was updated.
TextUpdateEvent.updateRangeEnd Read only Experimental: Returns the index of the last character in the range of text that was updated.
TextUpdateEvent.text Read only Experimental: Returns the text that was inserted in the updated range.
TextUpdateEvent.selectionStart Read only Experimental: Returns the index of the first character in the new selection range, after the update.
TextUpdateEvent.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.

html

<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

Specification
EditContext API # dom-textupdateevent

Browser compatibility

BCD tables only load in the browser