EditContext: textupdate event

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

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

ontextupdate = (event) => {};

A TextUpdateEvent. Inherits from Event.

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.

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.

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

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);
});