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() などのメソッドでイベント名を用いるか、イベントハンドラープロパティを設定します。

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

oncharacterboundsupdate = (event) => {};

イベント型

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

イベントプロパティ

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

CharacterBoundsUpdateEvent.rangeStart 読取専用

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

CharacterBoundsUpdateEvent.rangeEnd 読取専用

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

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

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

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

ブラウザーの互換性

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
characterboundsupdate event
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.