Limited support 一部のブラウザのみ対応。使用時はサポート状況を確認すること。

EditContext

Experimental: これは実験的な機能です。

本番で使用する前にブラウザー互換性一覧表をチェックしてください。

EditContext インターフェイスは、EditContext API を用いて、編集可能になった要素のテキスト編集コンテキストを表します。

EditContext API は、インプットメソッドエディター (IME) による変換、絵文字ピッカー、その他のプラットフォーム固有の編集関係の UI などの高度なテキスト入力体験に対応したリッチなテキストエディターをウェブ上で構築するのに利用できます。

その他

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`EditContext` 実験的	121	121			121
`CharacterBoundsUpdateEvent` 実験的 CharacterBoundsUpdateEvent インターフェイスは DOM イベントで、EditContext のインスタンスに関連付けられた編集可能な領域内の特定の各文字の境界を知るためのオペレーティングシステムからの要求を表します。	121	121			121
`CharacterBoundsUpdateEvent` 実験的 CharacterBoundsUpdateEvent() コンストラクターは、新しい CharacterBoundsUpdateEvent オブジェクトを返します。	121	121			121
`rangeEnd` 実験的読み取り専用プロパティ CharacterBoundsUpdateEvent.rangeEnd は、編集可能な領域内のテキストのうち、オペレーティングシステムが境界を要求している部分の終点となる文字のオフセットを表します。	121	121			121
`rangeStart` 実験的読み取り専用プロパティ CharacterBoundsUpdateEvent.rangeStart は、編集可能な領域内のテキストのうち、オペレーティングシステムが境界を要求している部分の始点となる文字のオフセットを表します。	121	121			121
`attachedElements` 実験的 EditContext インターフェイスの attachedElements() メソッドは、要素が 1 個だけ格納された Array を返します。この要素は、この EditContext オブジェクトと関連付けられた要素です。	121	121			121
`characterBounds` 実験的 EditContext インターフェイスの characterBounds() メソッドは、この EditContext オブジェクト内の各文字を囲む長方形のリストが格納された Array を返します。	121	121			121
`characterBoundsRangeStart` 実験的 EditContext インターフェイスの読み取り専用プロパティ characterBoundsRangeStart は、編集可能なテキストコンテンツ内での、配列 EditContext.characterBounds() の最初の要素に対応する文字の位置を表します。	121	121			121
`characterboundsupdate_event` 実験的 characterboundsupdate イベントは、オペレーティングシステムが EditContext オブジェクトの編集可能なテキスト領域内にある特定の各文字の境界を知る必要がある時発火します。	121	121			121
`compositionend_event` 実験的 EditContext インターフェイスの compositionend イベントは、Input Method Editor (IME) ウィンドウを用いた変換が終了する時発火します。	121	121			121
`compositionstart_event` 実験的 EditContext インターフェイスの compositionstart イベントは、Input Method Editor (IME) ウィンドウを用いた変換が開始する時発火します。	121	121			121
`EditContext` 実験的 EditContext() コンストラクターは、新しい EditContext オブジェクトを返します。	121	121			121
`selectionEnd` 実験的 EditContext の読み取り専用プロパティ selectionEnd は、編集可能なテキストコンテンツ内での、現在選択されている範囲の終点のオフセットを表します。	121	121			121
`selectionStart` 実験的 EditContext の読み取り専用プロパティ selectionStart は、編集可能なテキストコンテンツ内での、現在選択されている範囲の始点のオフセットを表します。	121	121			121
`text` 実験的 EditContext インターフェイスの読み取り専用プロパティ text は、要素の編集可能なコンテンツを表します。	121	121			121
`textformatupdate_event` 実験的 EditContext インターフェイスの textformatupdate イベントは、Input Method Editor (IME) ウィンドウを用いた変換を実行中に発火します。	121	121			121
`textupdate_event` 実験的 EditContext インターフェイスの textupdate イベントは、ユーザーが EditContext のインスタンスに関連付けられた編集可能な領域のテキストまたは選択範囲を変更した時発火します。	121	121			121
`updateCharacterBounds` 実験的 EditContext インターフェイスの EditContext.updateCharacterBounds() メソッドは、オペレーティングシステムに EditContext オブジェクト内の各文字の位置と大きさを知らせるため、 EditContext.characterboundsupdate_event イベントへの応答として呼び出すべきです。	121	121			121
`updateControlBounds` 実験的 EditContext インターフェイスの EditContext.updateControlBounds() メソッドは、オペレーティングシステムに EditContext オブジェクトの編集可能なテキスト領域の位置と大きさを知らせるために使われます。	121	121			121
`updateSelection` 実験的 EditContext インターフェイスの updateSelection() メソッドは、編集可能なテキストコンテンツ内の選択の内部状態を更新します。このメソッドは、マウスのクリックやドラッグ、およびキーボード操作など、ユーザーが EditContext に関連付けられた要素で描画されたテキストの操作を行った際に選択の状態を更新するために用いられます。	121	121			121
`updateSelectionBounds` 実験的 EditContext インターフェイスの EditContext.updateSelectionBounds() メソッドは、オペレーティングシステムに EditContext オブジェクトに関連付けられた編集可能な領域内で選択されているテキストの領域の情報を知らせます。	121	121			121
`updateText` 実験的 EditContext インターフェイスの updateText() メソッドは、EditContext オブジェクト内部のテキストコンテンツを更新します。	121	121			121
`editContext` 実験的 editContext は HTMLElement インターフェイスのプロパティで、要素に関連付けられた EditContext オブジェクトを取得したり設定したりします。	121	121			121
`TextFormat` 実験的 TextFormat インターフェイスは、EditContext のインスタンスに関連付けられた編集可能なテキスト領域内のある範囲のテキストに適用するべき特定の書式を表します。このテキストの書式は、ユーザーがテキストの変換に用いている Input Method Editor (IME) からの要求です。	121	121			121
`rangeEnd` 実験的 TextFormat インターフェイスの rangeEnd プロパティは、この書式を適用するべきテキストの範囲の終点を表します。	121	121			121
`rangeStart` 実験的 TextFormat インターフェイスの rangeStart プロパティは、このテキストの書式を適用するべきテキストの範囲の始点を表します。	121	121			121
`TextFormat` 実験的 TextFormat() コンストラクターは、新しい TextFormat オブジェクトを返します。	121	121			121
`underlineStyle` 実験的 TextFormat インターフェイスの underlineStyle プロパティは、この書式を適用するテキストの範囲につけるべき下線のスタイルを表します。	121	121			121
`underlineThickness` 実験的 TextFormat インターフェイスの underlineThickness プロパティは、この書式を適用するテキストの範囲につけるべき下線の太さを表します。	121	121			121
`TextFormatUpdateEvent` 実験的 TextFormatUpdateEvent インターフェイスは DOM イベントで、EditContext のインスタンスに関連付けられた編集可能な領域内で変換中のテキストにInput Method Editor (IME) ウィンドウが適用したい書式のリストを表します。	121	121			121
`getTextFormats` 実験的 TextFormatUpdateEvent インターフェイスの getTextFormats() メソッドは、Input Method Editor (IME) ウィンドウが変換中のテキストに適用したい書式を表す TextFormat オブジェクトの Array を返します。	121	121			121
`TextFormatUpdateEvent` 実験的 TextFormatUpdateEvent() コンストラクターは、新しい TextFormatUpdateEvent オブジェクトを返します。	121	121			121
`TextUpdateEvent` 実験的 TextUpdateEvent インターフェイスは DOM イベントで、EditContext のインスタンスに関連付けられた編集可能なテキスト領域内のテキストまたは選択の更新を表します。	121	121			121
`selectionEnd` 実験的読み取り専用プロパティ TextUpdateEvent.selectionEnd は、EditContext のオブジェクトに関連付けられた編集可能な領域のテキストコンテンツ内の選択範囲 (またはキャレット) の終点の位置を表します。	121	121			121
`selectionStart` 実験的読み取り専用プロパティ TextUpdateEvent.selectionStart は、EditContext のオブジェクトに関連付けられた編集可能な領域のテキストコンテンツ内の選択範囲 (またはキャレット) の始点の位置を表します。	121	121			121
`text` 実験的読み取り専用プロパティ TextUpdateEvent.text には、EditContext の textupdate イベントで更新された範囲に挿入されたテキストが格納されています。	121	121			121
`TextUpdateEvent` 実験的 TextUpdateEvent() コンストラクターは、新しい TextUpdateEvent のオブジェクトを返します。	121	121			121
`updateRangeEnd` 実験的読み取り専用プロパティ TextUpdateEvent.updateRangeEnd は、EditContext オブジェクト内で置き換えられているテキストの範囲の終点を表します。	121	121			121
`updateRangeStart` 実験的読み取り専用プロパティ TextUpdateEvent.updateRangeStart は、EditContext オブジェクト内で置き換えられているテキストの範囲の始点を表します。	121	121			121

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT

const editCtx = new EditContext();
const el = document.getElementById('editor');
el.editContext = editCtx;
editCtx.addEventListener('textupdate', (e) => {
  console.log('Input text:', e.text);
});

ライブデモ

Edit context role

Describe how EditContext separates text editing services from normal DOM editing.

プレビュー全画面表示

Why it exists

Useful for editors that need IME support, custom layout, and full rendering control.

プレビュー全画面表示

Adoption note

EditContext is specialized and usually unnecessary for ordinary forms or contenteditable.

プレビュー全画面表示

実務での使いどころ

EditContext の活用

Experimental: これは実験的な機能です。

注意点

一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。

対応ブラウザ

基本構文

ライブデモ

Edit context role

Why it exists

Adoption note

実務での使いどころ

EditContext の活用

注意点

アクセシビリティ

参考リンク