TextUpdateEvent

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

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

In diesem Artikel

Konstruktor

TextUpdateEvent()

Erstellt ein neues TextUpdateEvent-Objekt.

Instanzeigenschaften

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.

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

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