EditContext: textupdate event

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 textupdate event of the EditContext interface fires when the user has made changes to the text or selection of an editable region that's attached to an EditContext instance.

This event makes it possible to render the updated text and selection in the UI, in response to user input.

Syntax

Use the event name in methods like addEventListener(), or set an event handler property.

js
addEventListener("textupdate", (event) => {});

ontextupdate = (event) => {};

Event type

A TextUpdateEvent. Inherits from Event.

Event properties

In addition to the properties listed below, properties from the parent interface, Event, are available.

TextUpdateEvent.updateRangeStart Read only

Returns the index of the first character in the range of text that was updated.

TextUpdateEvent.updateRangeEnd Read only

Returns the index of the last character in the range of text that was updated.

TextUpdateEvent.text Read only

Returns the text that was inserted in the updated range.

TextUpdateEvent.selectionStart Read only

Returns the index of the first character in the new selection range, after the update.

TextUpdateEvent.selectionEnd Read only

Returns the index of the last character in the new selection range, after the update.

Examples

Rendering the updated text on textupdate

In the following example, the textupdate event of the EditContext API is used to render the text a user enters in an editable <canvas> element.

html
<canvas id="editor-canvas"></canvas>
js
const canvas = document.getElementById("editor-canvas");
const ctx = canvas.getContext("2d");
const editContext = new EditContext();
canvas.editContext = editContext;

editContext.addEventListener("textupdate", (e) => {
  // When the user has focus on the <canvas> and enters text,
  // this event is fired, and we use it to re-render the text.
  console.log(
    `The user entered the text: ${e.text} at ${e.updateRangeStart}. Re-rendering the full EditContext text`,
  );
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillText(editContext.text, 10, 10);
});

Specifications

Specification
EditContext API
# dom-editcontext-ontextupdate

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
textupdate event
Experimental

Legend

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.