TextFormatUpdateEvent

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.

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.

Event TextFormatUpdateEvent

Konstruktor

TextFormatUpdateEvent() Experimentell

Erstellt ein neues TextFormatUpdateEvent-Objekt.

Instanzmethoden

TextFormatUpdateEvent.getTextFormats Experimentell

Gibt ein Array von TextFormat-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.

html
<canvas id="editor-canvas"></canvas>
js
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

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
TextFormatUpdateEvent
Experimental
TextFormatUpdateEvent() constructor
Experimental
getTextFormats
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.