EditContext: compositionend 事件

可用性有限

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

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

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

語法

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

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

oncompositionend = (event) => { }

示例

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

在以下示例中，當觸發 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");
});