EditContext: characterboundsupdate イベント

Limited availability

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

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

characterboundsupdate イベントは、オペレーティングシステムが EditContext オブジェクトの編集可能なテキスト領域内にある特定の各文字の境界を知る必要がある時発火します。

これは、オペレーティングシステムがインプットメソッドエディター (IME) ウィンドウなどのプラットフォーム固有の編集関係の UI を表示する必要がある際に発生します。

characterboundsupdate イベントが発火した際は、テキストの各文字の境界を計算し、EditContext.updateCharacterBounds() メソッドを呼び出すことによりオペレーティングシステムに必要な情報を渡すべきです。

いつ、そしてどのように characterboundsupdate イベントを用いるかについて詳しくは、updateCharacterBounds メソッドのドキュメントを参照してください。

構文

addEventListener() などのメソッドでイベント名を用いるか、イベントハンドラープロパティを設定します。

addEventListener("characterboundsupdate", (event) => {});

oncharacterboundsupdate = (event) => {};

イベント型

CharacterBoundsUpdateEvent です。Event を継承しています。

イベントプロパティ

以下に挙げたプロパティに加えて、親の Event インターフェイス由来のプロパティも使用可能です。

CharacterBoundsUpdateEvent.rangeStart 読取専用: 編集可能な領域内のテキスト内のオペレーティングシステムが境界を必要としている始点の文字のオフセットです。
CharacterBoundsUpdateEvent.rangeEnd 読取専用: 編集可能な領域内のテキスト内のオペレーティングシステムが境界を必要としている終点の文字のオフセットです。

例

必要に応じて各文字の境界を更新する

この例では、updateCharacterBounds メソッドを用いて、オペレーティングシステムが情報を要求した時に canvas 要素の EditContext 内の各文字の境界を更新する方法を示します。このイベントリスナーコールバックはテキストの変換に IME ウィンドウやその他のプラットフォーム固有の編集 UI を使用しているときのみ呼ばれることに注意してください。

html

<canvas id="editor-canvas"></canvas>

const FONT_SIZE = 40;
const FONT = `${FONT_SIZE}px Arial`;

const canvas = document.getElementById("editor-canvas");
const ctx = canvas.getContext("2d");
ctx.font = FONT;

const editContext = new EditContext();
canvas.editContext = editContext;

function computeCharacterBound(offset) {
  // テキストの先頭から対象の文字までの幅を計測します。
  const widthBeforeChar = ctx.measureText(
    editContext.text.substring(0, offset),
  ).width;

  // 対象の文字の幅を計測します。
  const charWidth = ctx.measureText(editContext.text[offset]).width;

  const charX = canvas.offsetLeft + widthBeforeChar;
  const charY = canvas.offsetTop;

  // 文字の境界を表す DOMRect を返します。
  return DOMRect.fromRect({
    x: charX,
    y: charY - FONT_SIZE,
    width: charWidth,
    height: FONT_SIZE,
  });
}

editContext.addEventListener("characterboundsupdate", (e) => {
  const charBounds = [];
  for (let offset = e.rangeStart; offset < e.rangeEnd; offset++) {
    charBounds.push(computeCharacterBound(offset));
  }

  console.log("The required character bounds are", charBounds);
  editContext.updateCharacterBounds(e.rangeStart, charBounds);
});

仕様書

Specification
EditContext API # dom-editcontext-oncharacterboundsupdate

ブラウザーの互換性

BCD tables only load in the browser