EditContext: Ereignis textformatupdate

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.

Das textformatupdate-Ereignis der EditContext-Schnittstelle wird ausgelöst, wenn die Eingabe über einen Input Method Editor (IME)-Fenster erfolgt.

Das Ereignis wird ausgelöst, wenn der IME entscheidet, dass bestimmte Teile des gerade komponierten Textes anders formatiert werden sollten, um den Kompositionszustand anzuzeigen.

Der folgende Screenshot zeigt ein Beispiel für Text, der in der Notepad-App auf Windows mit dem japanischen IME geschrieben wird. Der Text ist mit einer dicken Unterstreichung formatiert, um anzuzeigen, dass er aus einer der IME-Vorschläge zusammengesetzt wurde.

Notepad auf Windows mit japanischem Text, der aus dem IME-Fenster komponiert wird

Als Webentwickler sollten Sie das textformatupdate-Ereignis beobachten und die Formatierung des in Ihrer editierbaren Region angezeigten Textes entsprechend aktualisieren.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

js
addEventListener("textformatupdate", (event) => {});

ontextformatupdate = (event) => {};

Ereignistyp

Ein TextFormatUpdateEvent. Erbt von Event.

Ereigniseigenschaften

Neben den unten aufgeführten Eigenschaften sind die Eigenschaften der übergeordneten Schnittstelle Event verfügbar.

TextFormatUpdateEvent.getTextFormats

Gibt die Liste der Textformate zurück, die das IME-Fenster auf den Text anwenden möchte.

Beispiele

Rendering von IME-Kompositionstextformatierung

Im folgenden Beispiel wird das textformatupdate-Ereignis verwendet, um die Formatierung des Textes in der editierbaren Region zu aktualisieren. Beachten Sie, dass der Ereignis-Listener-Callback in diesem Beispiel nur aufgerufen wird, wenn ein IME-Fenster oder andere plattformspezifische Bearbeitungsoberflächen zum Textkomponieren verwendet werden.

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);

  // 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

Specification
EditContext API
# dom-editcontext-ontextformatupdate

Browser-Kompatibilität

BCD tables only load in the browser