← 返回首页

TextUpdateEvent - Web API | MDN

Toggle sidebar

Theme

OS default
Light
Dark

日本語

Remember language Learn more

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 からプロパティを継承しています。

Event TextUpdateEvent

In this article

コンストラクター

TextUpdateEvent()

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

インスタンスプロパティ

TextUpdateEvent.updateRangeStart 読取専用

更新されたテキストの範囲の始点の文字の添字を返します。

TextUpdateEvent.updateRangeEnd 読取専用

更新されたテキストの範囲の終点の文字の添字を返します。

TextUpdateEvent.text 読取専用

更新された範囲に挿入されたテキストを返します。

TextUpdateEvent.selectionStart 読取専用

更新後の、新しい選択範囲の始点の文字の添字を返します。

TextUpdateEvent.selectionEnd 読取専用

更新後の、新しい選択範囲の終点の文字の添字を返します。

例

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

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

html

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

js
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

ブラウザーの互換性

Enable JavaScript to view this browser compatibility table.

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2024年11月29日 by MDN contributors.

View this page on GitHub • Report a problem with this content