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 der Benutzer Änderungen am Text oder der Auswahl eines bearbeitbaren Bereichs vorgenommen hat, der an eine EditContext Instanz angehängt ist.
Dieses Ereignis ermöglicht es, den aktualisierten Text und die Auswahl im UI als Reaktion auf Benutzereingaben darzustellen.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("textupdate", (event) => { })
ontextupdate = (event) => { }
Ereignistyp
Ein TextUpdateEvent. Erbt von Event.
Beispiele
Rendering des aktualisierten Texts bei textupdate
Im folgenden Beispiel wird das textupdate Ereignis der EditContext API verwendet, um den Text darzustellen, den ein Benutzer in ein bearbeitbares <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);
});
Spezifikationen
| Spezifikation |
|---|
| EditContext API # dom-editcontext-ontextupdate |