Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/en-US/docs/Web/API/EditContext/textupdate_event below:

EditContext: textupdate event - Web APIs

Limited availability

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.

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4