compositionstart 事件用于捕获用户开始中文输入法合成的时刻，标志输入法编辑状态开启，需与 compositionupdate、compositionend 协同使用以准确处理中文输入，避免 input 或 keydown 的误判。
在 JavaScript 中，compositionstart 事件用于捕获用户开始中文（或其他需要输入法编辑的文本）输入的时刻，比如刚按下拼音字母、进入输入法编辑状态但尚未确认上屏。它和 compositionupdate、compositionend 一起构成「输入法合成事件」，是准确处理中文输入的关键机制——避免把拼音过程中的中间态（如“nihao”）误当作最终内容。
为什么不能只依赖 input 或 keydown？
直接监听 input 事件会在中文输入法“上屏”后才触发（即用户按空格/回车确认后），中间的拼音输入（如输入“zhong”还没选字）不会触发；而 keydown 会频繁触发且包含大量无意义的按键（如 Shift、ArrowLeft），无法区分真实文字输入意图。使用 compositionstart 可以明确知道：「用户现在要输入一段需合成的文本了」。
compositionstart 的典型配合用法
通常需要三个事件协同判断输入阶段：
- compositionstart：输入法开始合成，此时可标记「进入中文输入状态」，暂停某些实时校验（如表单验证、自动搜索）
- compositionupdate：合成内容变化（如拼音更新、候选字切换），一般不用处理，除非要做输入预览
-
compositionend：用户确认上屏（如选字、按空格），此时
event.data包含最终插入的文本，input事件也会紧随其后触发
一个实用的中文输入防抖示例
比如实现搜索框的「仅在中文输入完成后再触发搜索」：
const input = document.getElementById('search');
let isComposing = false;
input.addEventListener('compositionstart', () => {
isComposing = true;
});
input.addEventListener('compositionend', (e) => {
isComposing = false;
// 此时 e.data 是用户最终输入的汉字，如 '你好'
doSearch(input.value); // 或用 e.data 更精确
});
input.addEventListener('input', () => {
if (!isComposing) {
// 非中文输入状态，或中文已确认完毕，再执行搜索
doSearch(input.value);
}
});
这样就能避免拼音过程中（如输到“niha”）就发起无效请求，提升体验和性能。
注意事项与兼容性
- 所有现代浏览器（Chrome、Firefox、Safari、Edge）均支持这三个合成事件
-
compositionstart和compositionend的event.data在compositionend中才有意义（表示上屏内容），compositionstart的data通常为空字符串 - 移动端（iOS/Android）输入法也触发这些事件，行为一致，可放心使用
- 不要在
compositionstart里直接修改input.value，可能干扰输入法状态
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
