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 der Auswahl eines bearbeitbaren Bereichs vornimmt, 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 Ereignishandler-Eigenschaft.

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

ontextupdate = (event) => {};

Ereignistyp

Ein TextUpdateEvent. Erbt von Event.

Ereigniseigenschaften

Neben den unten aufgeführten Eigenschaften sind die 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 einem bearbeitbaren <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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
textupdate event
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.