TextUpdateEvent

Limited availability

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

Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.

TheTextUpdateEvent interface is aDOM event that represents a text or selection update in an editable text region that's attached to anEditContext instance.

This interface inherits properties fromEvent.

Constructor

TextUpdateEvent()Experimental: Creates a newTextUpdateEvent object.

Instance properties

TextUpdateEvent.updateRangeStartRead onlyExperimental: Returns the index of the first character in the range of text that was updated.
TextUpdateEvent.updateRangeEndRead onlyExperimental: Returns the index of the last character in the range of text that was updated.
TextUpdateEvent.textRead onlyExperimental: Returns the text that was inserted in the updated range.
TextUpdateEvent.selectionStartRead onlyExperimental: Returns the index of the first character in the new selection range, after the update.
TextUpdateEvent.selectionEndRead onlyExperimental: 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 thetextupdate event is used to render the text when the user is typing.

html

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