EditContext: textupdate-Ereignis
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Das textupdate-Ereignis der EditContext-Schnittstelle wird ausgelöst, wenn Benutzer Änderungen am Text oder an der Auswahl in einem bearbeitbaren Bereich vornehmen, der mit einer EditContext-Instanz verknüpft ist.
Dieses Ereignis ermöglicht es, den aktualisierten Text und die Auswahl als Reaktion auf Benutzereingaben in der Benutzeroberfläche darzustellen.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("textupdate", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
ontextupdate = (event) => { }
Ereignistyp
Ein TextUpdateEvent. Erbt von Event.
Beispiele
Aktualisierten Text bei textupdate darstellen
Im folgenden Beispiel wird das textupdate-Ereignis der EditContext API verwendet, um den Text darzustellen, den Benutzer in ein bearbeitbares <canvas>-Element eingeben.
<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);
});
Spezifikationen
| Spezifikation |
|---|
| EditContext API # dom-editcontext-ontextupdate |