TextFormatUpdateEvent

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

TextFormatUpdateEvent インターフェイスは DOM イベントで、EditContext のインスタンスに関連付けられた編集可能な領域内で変換中のテキストにインプットメソッドエディター (IME) ウィンドウが適用したい書式のリストを表します。

このインターフェイスは Event からプロパティを継承しています。

Event TextFormatUpdateEvent

コンストラクター

TextFormatUpdateEvent()

新しい TextFormatUpdateEvent オブジェクトを生成します。

インスタンスメソッド

TextFormatUpdateEvent.getTextFormats

IME ウィンドウがテキストに適用したい書式を表す TextFormat オブジェクトの Array を返します。

例

IME で変換中のテキストに書式を設定する

以下の例では、textformatupdate イベントを用いて編集可能な領域内のテキストの書式を更新しています。

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) => {
  // キャンバスを初期化します。
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // テキストを描画します。
  ctx.fillText(editContext.text, TEXT_X, TEXT_Y);
  console.log(`Rendering text: ${editContext.text}`);

  // IME ウィンドウが適用したい書式を取得します。
  const formats = e.getTextFormats();

  // 取得した書式を走査します。
  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;

    // 簡単のため、この例ではシンプルな下線のみを引きます。
    // 正しい下線を引くには、underlineStyle と underlineThickness を使用してください。

    ctx.beginPath();
    ctx.moveTo(TEXT_X + underlineXStart, underlineY);
    ctx.lineTo(TEXT_X + underlineXEnd, underlineY);
    ctx.stroke();
  }
});

仕様書

Specification
EditContext API
# dom-textformatupdateevent

ブラウザーの互換性

BCD tables only load in the browser