Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
TextFormatUpdateEvent
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more 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.
Die TextFormatUpdateEvent-Schnittstelle ist ein DOM-Ereignis, das eine Liste von Textformaten darstellt, die ein Input Method Editor (IME)-Fenster auf den in einer bearbeitbaren Region verfassten Text anwenden möchte, die mit einer Instanz von EditContext verbunden ist.
Diese Schnittstelle erbt Eigenschaften von Event.
Konstruktor
TextFormatUpdateEvent()-
Erstellt ein neues
TextFormatUpdateEvent-Objekt.
Instanzmethoden
TextFormatUpdateEvent.getTextFormats-
Gibt ein
ArrayvonTextFormat-Objekten zurück, die die Formate darstellen, die das IME-Fenster auf den Text anwenden möchte.
Beispiele
IME-verfassten Text formatieren
Im folgenden Beispiel wird das textformatupdate-Ereignis verwendet, um das Format des Textes in der bearbeitbaren Region zu aktualisieren.
<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);
console.log(`Rendering text: ${editContext.text}`);
// 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;
console.log(
`Applying underline ${underlineThickness} ${underlineStyle} between ${rangeStart} and ${rangeEnd}.`,
);
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.
// Use underlineStyle and underlineThickness to draw the correct underline.
ctx.beginPath();
ctx.moveTo(TEXT_X + underlineXStart, underlineY);
ctx.lineTo(TEXT_X + underlineXEnd, underlineY);
ctx.stroke();
}
});
Spezifikationen
| Spezifikation |
|---|
| EditContext API # dom-textformatupdateevent |
Browser-Kompatibilität
JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.