元素：compositionstart 事件

compositionstart 事件在文本合成系统（如输入法编辑器）开始新的合成会话时触发。

例如，当用户使用拼音输入法开始输入汉字时，可能会触发此事件。

语法

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

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

oncompositionstart = (event) => {};

事件类型

一个 CompositionEvent。继承自 UIEvent 和 Event。

事件属性

此接口还继承其父级 UIEvent 和祖先 — Event 的属性。

CompositionEvent.data 只读: 返回由引发事件的输入法生成的字符；它根据生成 CompositionEvent 对象的事件类型而有所不同。
CompositionEvent.locale 只读已弃用: 返回当前输入法的语言环境（例如，如果合成与输入法相关联，则为键盘布局语言环境）。

示例

const inputElement = document.querySelector('input[type="text"]');

inputElement.addEventListener("compositionstart", (event) => {
  console.log(`generated characters were: ${event.data}`);
});

实时示例

HTML

html

<div class="control">
  <label for="example">
    Focus the text-input control, then open your IME and begin typing.
  </label>
  <input type="text" id="example" name="example" />
</div>

<div class="event-log">
  <label for="eventLog">Event log:</label>
  <textarea
    readonly
    class="event-log-contents"
    rows="8"
    cols="25"
    id="eventLog"></textarea>
  <button class="clear-log">Clear</button>
</div>

body {
  padding: 0.2rem;
  display: grid;
  grid-template-areas: "control log";
}

.control {
  grid-area: control;
}

.event-log {
  grid-area: log;
}

.event-log-contents {
  resize: none;
}

label,
button {
  display: block;
}

input[type="text"] {
  margin: 0.5rem 0;
}

kbd {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}

JavaScript

const inputElement = document.querySelector('input[type="text"]');
const log = document.querySelector(".event-log-contents");
const clearLog = document.querySelector(".clear-log");

clearLog.addEventListener("click", () => {
  log.textContent = "";
});

function handleEvent(event) {
  log.textContent += `${event.type}: ${event.data}\n`;
}

inputElement.addEventListener("compositionstart", handleEvent);
inputElement.addEventListener("compositionupdate", handleEvent);
inputElement.addEventListener("compositionend", handleEvent);

结果

规范

规范
UI 事件 # event-type-compositionstart

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅

相关事件：compositionend、compositionupdate。