Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
EditContext: characterboundsupdate-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 Ereignis characterboundsupdate wird ausgelöst, wenn das Betriebssystem die Begrenzungen bestimmter Zeichen innerhalb des bearbeitbaren Textbereichs eines EditContext-Objekts benötigt.
Dies geschieht, wenn das Betriebssystem eine plattformspezifische Benutzeroberfläche für die Textbearbeitung anzeigen muss, beispielsweise ein Fenster für einen Input Method Editor (IME).
Wenn das Ereignis characterboundsupdate ausgelöst wird, sollten Sie die Begrenzungen der Zeichen im Text berechnen und anschließend die Methode EditContext.updateCharacterBounds() aufrufen, um dem Betriebssystem die benötigten Informationen bereitzustellen.
Weitere Informationen dazu, wann und wie Sie das Ereignis characterboundsupdate verwenden, finden Sie in der Dokumentation zur Methode updateCharacterBounds.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("characterboundsupdate", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
oncharacterboundsupdate = (event) => { }
Ereignistyp
Ein CharacterBoundsUpdateEvent. Erbt von Event.
Beispiele
>Zeichenbegrenzungen bei Bedarf aktualisieren
Dieses Beispiel zeigt, wie Sie mit der Methode updateCharacterBounds die Zeichenbegrenzungen im EditContext eines canvas-Elements aktualisieren, wenn das Betriebssystem diese Informationen benötigt. Beachten Sie, dass die Callback-Funktion des Event-Listeners nur aufgerufen wird, wenn Text mithilfe eines IME-Fensters oder einer anderen plattformspezifischen Benutzeroberfläche für die Textbearbeitung eingegeben wird.
<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
| Spezifikation |
|---|
| EditContext API> # dom-editcontext-oncharacterboundsupdate> |