EditContext: textformatupdate-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 textformatupdate-Ereignis der EditContext-Schnittstelle wird ausgelöst, während Text mithilfe eines Input Method Editors (IME) eingegeben wird.
Das Ereignis wird ausgelöst, wenn der IME festlegt, dass bestimmte Teile des gerade eingegebenen Textes anders formatiert werden sollen, um den Eingabestatus anzuzeigen.
Der folgende Screenshot zeigt ein Beispiel für die Texteingabe in der Notepad-App unter Windows mit dem japanischen IME. Der Text ist dick unterstrichen, um anzuzeigen, dass er aus einem der Vorschläge des IME übernommen wurde.
Als Webentwickler sollten Sie auf das textformatupdate-Ereignis reagieren und die Formatierung des Textes in Ihrem bearbeitbaren Bereich entsprechend aktualisieren.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("textformatupdate", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
ontextformatupdate = (event) => { }
Ereignistyp
Ein TextFormatUpdateEvent. Erbt von Event.
Beispiele
Formatierung von Text während der IME-Eingabe darstellen
Im folgenden Beispiel wird das textformatupdate-Ereignis verwendet, um die Formatierung des Textes im bearbeitbaren Bereich zu aktualisieren. Beachten Sie, dass die Event-Listener-Callback-Funktion in diesem Beispiel nur aufgerufen wird, wenn Text mit einem IME-Fenster oder einer anderen plattformspezifischen Benutzeroberfläche zur Texteingabe eingegeben wird.
<canvas id="editor-canvas"></canvas>
const TEXT_X = 10;
const TEXT_Y = 10;
const canvas = document.getElementById("editor-canvas");
const ctx = canvas.getContext("2d");
const editContext = new EditContext();
canvas.editContext = editContext;
editContext.addEventListener("textformatupdate", (e) => {
// Clear the canvas.
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Render the text.
ctx.fillText(editContext.text, TEXT_X, TEXT_Y);
// Get the text formats that the IME window wants to apply.
const formats = e.getTextFormats();
// Iterate over the text formats
for (const format of formats) {
const { rangeStart, rangeEnd, underlineStyle, underlineThickness } = format;
const underlineXStart = ctx.measureText(
editContext.text.substring(0, rangeStart),
).width;
const underlineXEnd = ctx.measureText(
editContext.text.substring(0, rangeEnd),
).width;
const underlineY = TEXT_Y + 3;
// For brevity, this example only draws a simple underline.
// You should use the underlineStyle and underlineThickness values to draw the underline.
ctx.beginPath();
ctx.moveTo(TEXT_X + underlineXStart, underlineY);
ctx.lineTo(TEXT_X + underlineXEnd, underlineY);
ctx.stroke();
}
});
Spezifikationen
| Spezifikation |
|---|
| EditContext API # dom-editcontext-ontextformatupdate |