HTMLElement: editContext プロパティ
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
editContext は HTMLElement インターフェイスのプロパティで、要素に関連付けられた EditContext オブジェクトを取得したり設定したりします。
EditContext API を使用することで、インプットメソッドエディター (IME) の変換や絵文字ピッカー、その他のプラットフォーム固有の編集関連 UI サーフェスなど、高度なテキスト入力に対応したリッチテキストエディターをウェブ上で構築することができます。
利用可能な要素
editContext プロパティを設定して動作するのは、一部の種類の要素だけです。
- HTML 要素のうち、
<article>,<aside>,<blockquote>,<body>,<div>,<footer>,<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,<header>,<main>,<nav>,<p>,<section>,<span>のいずれか。 - 有効なカスタム要素。
<canvas>要素。
上記以外の要素で editContext プロパティを設定しようとすると、NotSupportedError の DOMException が発生します。
要素の関連付け
要素の editContext プロパティに EditContext インスタンスを設定すると、その要素と EditContext インスタンスの関連付けが行われます。
関連は 1 対 1 で行われます。
- 要素は 1 つの
EditContextインスタンスにのみ関連付けることができます。 - 1 つの
EditContextインスタンスは 1 つの要素にのみ関連付けることができます。
すでに関連付けられた EditContext インスタンスを別の要素に関連付けようとすると、 DOMException が発生します。
他の EditContext インスタンスを既に関連付けられた要素に関連付けようとした場合も、 DOMException が発生します。
要素がすでに EditContext インスタンスに関連付けられているかどうかを調べるには、EditContext.attachedElements() メソッドを使用してください。
ガベージコレクション
EditContext インスタンスは、関連する要素が DOM から除去されても、他の参照する要素があれば、その関連する要素を維持し続けます。
要素が確実にガベージコレクションされるようにしたい場合は、要素の editContext プロパティをクリアして下さい。
値
EditContext オブジェクトまたは null です。
例
要素の editContext プロパティの設定
この例では、要素を編集可能にするために <canvas> 要素の editContext プロパティを新しい EditContext インスタンスに設定する方法を示します。
<canvas id="editor-canvas"></canvas>
const canvas = document.getElementById("editor-canvas");
const editContext = new EditContext();
canvas.editContext = editContext;
要素の editContext プロパティのクリア
この例では、DOM から要素を安全に除去するために、編集可能な <canvas> 要素の editContext プロパティをクリアする方法を示します。
<canvas id="editor-canvas"></canvas>
// EditContext を作成して canvas 要素に関連付ける
const canvas = document.getElementById("editor-canvas");
const editContext = new EditContext();
canvas.editContext = editContext;
// そのあとで editContext プロパティをクリアし、要素を除去する
canvas.editContext = null;
canvas.remove();
仕様書
| Specification |
|---|
| EditContext API # dom-htmlelement-editcontext |
ブラウザーの互換性
Loading…
関連情報
EditContextインターフェイス