EditContext: text-Eigenschaft

Ein String, der den aktuellen bearbeitbaren Inhalt des Elements enthält, das dem EditContext-Objekt zugeordnet ist. Sein Anfangswert ist der leere String.

Dieser String kann mit dem Wert der textContent-Eigenschaft des DOM-Elements, das dem EditContext zugeordnet ist, übereinstimmen oder auch nicht. Das zugeordnete Element könnte zum Beispiel ein <canvas>-Element sein, das keine textContent-Eigenschaft hat. Oder das zugeordnete Element könnte ein <div>-Element sein, das Text enthält, der sich von dem EditContext.text-Wert unterscheidet, um fortgeschrittenes Rendering zu ermöglichen.

Die text-Eigenschaft des EditContext-Objekts kann als Modell für den bearbeitbaren Textbereich verwendet werden. Andere Eigenschaften des EditContext-Objekts, wie selectionStart und selectionEnd, beziehen sich auf Offsets innerhalb des text-Strings.

Im folgenden Beispiel wird die EditContext-API verwendet, um den Text, den ein Benutzer in einem <canvas>-Element eingibt, darzustellen.

<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}. Re-rendering the full EditContext text`,
  );
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillText(editContext.text, 10, 10);
});