EditContext: textupdate Ereignis

Limited availability

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

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Das textupdate Ereignis der EditContext Schnittstelle wird ausgelöst, wenn der Benutzer Änderungen am Text oder an der Auswahl eines bearbeitbaren Bereichs vorgenommen hat, der mit einer EditContext Instanz verbunden ist.

Dieses Ereignis ermöglicht es, den aktualisierten Text und die Auswahl in der Benutzeroberfläche als Reaktion auf Benutzereingaben darzustellen.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.

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

ontextupdate = (event) => { }

Ereignistyp

Ein TextUpdateEvent. Erbt von Event.

Ereigniseigenschaften

Neben den unten aufgeführten Eigenschaften sind auch Eigenschaften der übergeordneten Schnittstelle, Event, verfügbar.

TextUpdateEvent.updateRangeStart Schreibgeschützt

Gibt den Index des ersten Zeichens im Bereich des aktualisierten Textes zurück.

TextUpdateEvent.updateRangeEnd Schreibgeschützt

Gibt den Index des letzten Zeichens im Bereich des aktualisierten Textes zurück.

TextUpdateEvent.text Schreibgeschützt

Gibt den Text zurück, der im aktualisierten Bereich eingefügt wurde.

TextUpdateEvent.selectionStart Schreibgeschützt

Gibt den Index des ersten Zeichens im neuen Auswahlbereich nach der Aktualisierung zurück.

TextUpdateEvent.selectionEnd Schreibgeschützt

Gibt den Index des letzten Zeichens im neuen Auswahlbereich nach der Aktualisierung zurück.

Beispiele

Darstellung des aktualisierten Textes bei textupdate

Im folgenden Beispiel wird das textupdate Ereignis der EditContext API verwendet, um den Text darzustellen, den ein Benutzer in ein bearbeitbares <canvas> Element eingibt.

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

Spezifikationen

Specification
EditContext API
# dom-editcontext-ontextupdate

Browser-Kompatibilität