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.
TextUpdateEvent() Creates a new TextUpdateEvent object.
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 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}`,
);
});