EditContext: compositionstart 事件

可用性有限

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

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

當使用輸入法編輯器 (IME) 視窗進行組合輸入開始時，會觸發 EditContext 介面的 compositionstart 事件。

語法

在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。

addEventListener("compositionstart", (event) => { })

oncompositionstart = (event) => { }

示例

使用 `compositionstart` 更改可編輯區域的邊框

在下面的示例中，當 compositionstart 事件觸發時，可編輯區域的邊框會設定為紅色；當 compositionend 事件觸發時，邊框會恢復為黑色。請注意，此示例中的事件監聽器回撥僅在使用 IME 視窗或其他平臺特定的編輯 UI 表面進行文字組合時才會呼叫。

css

#text-editor {
  border: 1px solid black;
}
#text-editor.is-composing {
  border-color: red;
}

html

<div id="text-editor"></div>

const editorElement = document.getElementById("text-editor");
const editContext = new EditContext();
editorElement.editContext = editContext;

editContext.addEventListener("compositionstart", (event) => {
  editorElement.classList.add("is-composing");
});

editContext.addEventListener("compositionend", (event) => {
  editorElement.classList.remove("is-composing");
});