EditContext: textupdate-Ereignis

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

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

ontextupdate = (event) => {};

Ein TextUpdateEvent. Erbt von Event.

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

TextUpdateEvent.updateRangeStart Nur lesbar

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

TextUpdateEvent.updateRangeEnd Nur lesbar

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

TextUpdateEvent.text Nur lesbar

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

TextUpdateEvent.selectionStart Nur lesbar

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

TextUpdateEvent.selectionEnd Nur lesbar

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

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

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