HTMLElement: editContext 屬性

可用性有限

此特性不是基線特性,因為它在一些最廣泛使用的瀏覽器中不起作用。

實驗性: 這是一項實驗性技術
在生產中使用此技術之前,請仔細檢查瀏覽器相容性表格

HTMLElement 介面的 editContext 屬性用於獲取和設定元素關聯的 EditContext 物件。

EditContext API 可用於在 Web 上構建富文字編輯器,支援高階文字輸入體驗,例如 輸入法編輯器 (IME) 組合、表情符號選擇器或任何其他平臺特定的編輯相關 UI 介面。

可能的元素

設定 editContext 屬性僅在特定型別的元素上有效

如果您嘗試在非上述元素上設定 editContext 屬性,則會丟擲 NotSupportedError DOMException

元素關聯

將元素的 editContext 屬性設定為 EditContext 例項會使該元素與該 EditContext 例項相關聯。

關聯是一對一

  • 一個元素只能關聯到一個 EditContext 例項。
  • 一個 EditContext 例項只能關聯到一個元素。

如果您嘗試將一個已關聯的 EditContext 例項關聯到另一個元素,則會丟擲 DOMException

如果您嘗試將另一個 EditContext 例項關聯到一個已有關聯的元素,同樣也會丟擲 DOMException

要檢查一個元素是否已與 EditContext 例項關聯,請使用 EditContext.attachedElements() 方法。

垃圾回收

如果 EditContext 例項有其他活動引用,它將保持其關聯元素處於活動狀態,即使關聯元素已從 DOM 中移除。

如果您想確保元素被垃圾回收,請清除該元素的 editContext 屬性。

一個 EditContext 物件或 null

示例

設定元素的 editContext 屬性

本示例演示瞭如何將 <canvas> 元素的 editContext 屬性設定為新的 EditContext 例項,以使其成為可編輯的。

html
<canvas id="editor-canvas"></canvas>
js
const canvas = document.getElementById("editor-canvas");
const editContext = new EditContext();
canvas.editContext = editContext;

清除元素的 editContext 屬性

本示例演示瞭如何清除可編輯 <canvas> 元素的 editContext 屬性,以安全地將其從 DOM 中移除。

html
<canvas id="editor-canvas"></canvas>
js
// Create the EditContext and associate it with the canvas element.
const canvas = document.getElementById("editor-canvas");
const editContext = new EditContext();
canvas.editContext = editContext;

// Later, clear the editContext property, and remove the element.
canvas.editContext = null;
canvas.remove();

規範

規範
EditContext API
# dom-htmlelement-editcontext

瀏覽器相容性

另見