Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
TextFormatUpdateEvent
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.
DieTextFormatUpdateEvent-Schnittstelle ist einDOM-Ereignis, das eine Liste von Textformaten darstellt, die einInput Method Editor (IME)-Fenster auf den in einer bearbeitbaren Region verfassten Text anwenden möchte, die mit einer Instanz vonEditContext verbunden ist.
Diese Schnittstelle erbt Eigenschaften vonEvent.
Konstruktor
TextFormatUpdateEvent()ExperimentellErstellt ein neues
TextFormatUpdateEvent-Objekt.
Instanzmethoden
TextFormatUpdateEvent.getTextFormatsExperimentellGibt 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 dastextformatupdate-Ereignis verwendet, um das Format des Textes in der bearbeitbaren Region zu aktualisieren.
<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
| Specification |
|---|
| EditContext API # dom-textformatupdateevent |