TextUpdateEvent
利用可能性は限定的
この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。
Want more browser support for this feature? Tell us why.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
TextUpdateEvent インターフェイスは DOM イベントで、EditContext のインスタンスに関連付けられた編集可能なテキスト領域内のテキストまたは選択の更新を表します。
このインターフェイスは、Event からプロパティを継承しています。
コンストラクター
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}`,
);
});
仕様書
| 仕様書 |
|---|
| EditContext API # dom-textupdateevent |