Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
TextUpdateEvent
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimentell:Dies ist eineexperimentelle Technologie
Überprüfen Sie dieBrowser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
DieTextUpdateEvent-Schnittstelle ist einDOM-Ereignis, das eine Text- oder Auswahlsaktualisierung in einem bearbeitbaren Textbereich darstellt, der an eineEditContext-Instanz angehängt ist.
Diese Schnittstelle erbt Eigenschaften vonEvent.
Konstruktor
TextUpdateEvent()ExperimentellErstellt ein neues
TextUpdateEvent-Objekt.
Instanzeigenschaften
TextUpdateEvent.updateRangeStartSchreibgeschütztExperimentellGibt den Index des ersten Zeichens im Bereich des aktualisierten Textes zurück.
TextUpdateEvent.updateRangeEndSchreibgeschütztExperimentellGibt den Index des letzten Zeichens im Bereich des aktualisierten Textes zurück.
TextUpdateEvent.textSchreibgeschütztExperimentellGibt den Text zurück, der im aktualisierten Bereich eingefügt wurde.
TextUpdateEvent.selectionStartSchreibgeschütztExperimentellGibt den Index des ersten Zeichens im neuen Auswahlbereich nach der Aktualisierung zurück.
TextUpdateEvent.selectionEndSchreibgeschütztExperimentellGibt den Index des letzten Zeichens im neuen Auswahlbereich nach der Aktualisierung zurück.
Beispiele
Rendern des aktualisierten Textes auf einer bearbeitbaren Leinwand
Im folgenden Beispiel wird die EditContext API verwendet, um bearbeitbaren Text in einem<canvas>-Element zu rendern, und dastextupdate-Ereignis wird verwendet, um den Text zu rendern, wenn der Benutzer tippt.
<canvas></canvas>const canvas = document.getElementById("editor-canvas");const ctx = canvas.getContext("2d");const editContext = new EditContext();canvas.editContext = editContext;function render() { // Clear the canvas. ctx.clearRect(0, 0, canvas.width, canvas.height); // Render the text. ctx.fillText(editContext.text, 10, 10);}editContext.addEventListener("textupdate", (e) => { // Re-render the editor view when the user is entering text. render(); console.log( `The user entered ${e.text}. Rendering the entire text: ${editContext.text}`, );});Spezifikationen
| Specification |
|---|
| EditContext API # dom-textupdateevent |