TextUpdateEvent

Limited availability

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

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

TextUpdateEvent インターフェイスは DOM イベントで、EditContext のインスタンスに関連付けられた編集可能なテキスト領域内のテキストまたは選択の更新を表します。

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

コンストラクター

TextUpdateEvent() Experimental: 新しい TextUpdateEvent のオブジェクトを生成します。

インスタンスプロパティ

TextUpdateEvent.updateRangeStart 読取専用 Experimental: 更新されたテキストの範囲の始点の文字の添字を返します。
TextUpdateEvent.updateRangeEnd 読取専用 Experimental: 更新されたテキストの範囲の終点の文字の添字を返します。
TextUpdateEvent.text 読取専用 Experimental: 更新された範囲に挿入されたテキストを返します。
TextUpdateEvent.selectionStart 読取専用 Experimental: 更新後の、新しい選択範囲の始点の文字の添字を返します。
TextUpdateEvent.selectionEnd 読取専用 Experimental: 更新後の、新しい選択範囲の終点の文字の添字を返します。

例

編集可能なキャンバスに更新されたテキストを描画する

以下の例では、EditContext API を用いて <canvas> 要素に編集可能なテキストを描画し、textupdate イベントを用いてユーザーが入力した時にテキストを描画します。

html

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

const canvas = document.getElementById("editor-canvas");
const ctx = canvas.getContext("2d");
const editContext = new EditContext();
canvas.editContext = editContext;

function render() {
  // キャンバスを初期化します。
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // テキストを描画します。
  ctx.fillText(editContext.text, 10, 10);
}

editContext.addEventListener("textupdate", (e) => {
  // ユーザーがテキストを入力した際に、エディタービューを再描画します。
  render();

  console.log(
    `The user entered ${e.text}. Rendering the entire text: ${editContext.text}`,
  );
});

仕様書

Specification
EditContext API # dom-textupdateevent

ブラウザーの互換性

BCD tables only load in the browser