EditContext: characterboundsupdate-Ereignis
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.
Das characterboundsupdate-Ereignis wird ausgelöst, wenn das Betriebssystem die Grenzen bestimmter Zeichen innerhalb des bearbeitbaren Textbereichs des EditContext-Objekts kennt.
Dies geschieht, wenn das Betriebssystem eine plattformspezifische, bearbeitungsbezogene Benutzeroberfläche anzeigen muss, wie beispielsweise ein Input Method Editor (IME)-Fenster.
Wenn das characterboundsupdate-Ereignis ausgelöst wird, sollten Sie die Zeichenbegrenzungen für den Text berechnen und dann die Methode EditContext.updateCharacterBounds() aufrufen, um dem Betriebssystem die benötigten Informationen bereitzustellen.
Lesen Sie die Dokumentation der updateCharacterBounds-Methode, um mehr darüber zu erfahren, wann und wie das characterboundsupdate-Ereignis verwendet werden sollte.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("characterboundsupdate", (event) => { }) oncharacterboundsupdate = (event) => { } Ereignistyp
Ein CharacterBoundsUpdateEvent. Erbt von Event.
Ereignis-Eigenschaften
Zusätzlich zu den unten aufgeführten Eigenschaften sind Eigenschaften der übergeordneten Schnittstelle, Event, verfügbar.
CharacterBoundsUpdateEvent.rangeStartSchreibgeschützt-
Der Versatz des ersten Zeichens innerhalb des bearbeitbaren Textes, für das das Betriebssystem die Grenzen benötigt.
CharacterBoundsUpdateEvent.rangeEndSchreibgeschützt-
Der Versatz des letzten Zeichens innerhalb des bearbeitbaren Textes, für das das Betriebssystem die Grenzen benötigt.
Beispiele
Aktualisierung der Zeichenbegrenzungen bei Bedarf
Dieses Beispiel zeigt, wie die updateCharacterBounds-Methode verwendet wird, um die Zeichenbegrenzungen im EditContext eines canvas-Elements zu aktualisieren, wenn das Betriebssystem angibt, dass es diese Informationen benötigt. Beachten Sie, dass der Rückruf des Ereignis-Listeners nur aufgerufen wird, wenn ein IME-Fenster oder andere plattformspezifische Bearbeitungsoberflächen verwendet werden, um Text zu komponieren.
<canvas id="editor-canvas"></canvas> const FONT_SIZE = 40; const FONT = `${FONT_SIZE}px Arial`; const canvas = document.getElementById("editor-canvas"); const ctx = canvas.getContext("2d"); ctx.font = FONT; const editContext = new EditContext(); canvas.editContext = editContext; function computeCharacterBound(offset) { // Measure the width from the start of the text to the character. const widthBeforeChar = ctx.measureText( editContext.text.substring(0, offset), ).width; // Measure the character width. const charWidth = ctx.measureText(editContext.text[offset]).width; const charX = canvas.offsetLeft + widthBeforeChar; const charY = canvas.offsetTop; // Return a DOMRect representing the character bounds. return DOMRect.fromRect({ x: charX, y: charY - FONT_SIZE, width: charWidth, height: FONT_SIZE, }); } editContext.addEventListener("characterboundsupdate", (e) => { const charBounds = []; for (let offset = e.rangeStart; offset < e.rangeEnd; offset++) { charBounds.push(computeCharacterBound(offset)); } console.log("The required character bounds are", charBounds); editContext.updateCharacterBounds(e.rangeStart, charBounds); }); Spezifikationen
| Specification |
|---|
| EditContext API # dom-editcontext-oncharacterboundsupdate |