EditContext: text-Eigenschaft

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 schreibgeschützte text-Eigenschaft des EditContext-Interfaces repräsentiert den bearbeitbaren Inhalt des Elements.

Wert

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.

Beispiele

Verwendung von text zur Darstellung des Textes in einem bearbeitbaren Canvas

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

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}. 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-text

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
text
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.