EditContext：compositionend 事件

有限可用性

此功能不是基线功能，因为它在某些最广泛使用的浏览器中不起作用。

实验性：这是一个实验性技术
在生产环境中使用此功能前，请仔细查看浏览器兼容性表。

EditContext 接口的 compositionend 事件在使用输入法编辑器 (IME) 窗口进行输入结束时触发。

语法

在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。

js
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>
js
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");
});

规范

规范
EditContext API
# dom-editcontext-oncompositionend

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。