TextUpdateEvent

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.

Die TextUpdateEvent-Schnittstelle ist ein DOM-Ereignis, das eine Text- oder Auswahlsaktualisierung in einem bearbeitbaren Textbereich darstellt, der an eine EditContext-Instanz angehängt ist.

Diese Schnittstelle erbt Eigenschaften von Event.

Event TextUpdateEvent

Konstruktor

TextUpdateEvent() Experimentell

Erstellt ein neues TextUpdateEvent-Objekt.

Instanzeigenschaften

TextUpdateEvent.updateRangeStart Schreibgeschützt Experimentell

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

TextUpdateEvent.updateRangeEnd Schreibgeschützt Experimentell

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

TextUpdateEvent.text Schreibgeschützt Experimentell

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

TextUpdateEvent.selectionStart Schreibgeschützt Experimentell

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

TextUpdateEvent.selectionEnd Schreibgeschützt Experimentell

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

Beispiele

Rendern des aktualisierten Textes auf einer bearbeitbaren Leinwand

Im folgenden Beispiel wird die EditContext API verwendet, um bearbeitbaren Text in einem <canvas>-Element zu rendern, und das textupdate-Ereignis wird verwendet, um den Text zu rendern, wenn der Benutzer tippt.

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;

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

Spezifikationen

Specification
EditContext API
# dom-textupdateevent

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
TextUpdateEvent
Experimental
TextUpdateEvent() constructor
Experimental
selectionEnd
Experimental
selectionStart
Experimental
text
Experimental
updateRangeEnd
Experimental
updateRangeStart
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.
See implementation notes.