JavaScript 中文输入需监听 compositionstart/end 事件配合 isComposing 标志位，避免 input/keydown 误判拼音过程；compositionstart 设标志为 true，compositionend 设为 false 并处理真实上屏内容，input 中仅当 !isComposing 时响应。
JavaScript 的事件机制本身不直接处理输入法的中文拼写过程，而是通过一套专门设计的输入事件来区分“输入意图”和“最终字符提交”，核心在于正确使用 compositionstart、compositionupdate 和 compositionend 事件，配合 input 事件做状态管理。
理解输入法的三个阶段（composition 生命周期）
当用户用中文输入法（如拼音、五笔）输入时，浏览器会触发一组“合成事件”，表示正在构造一个字符序列：
- compositionstart：用户开始输入拼音（如敲下 “zhong”），输入法弹出候选框，此时还没上屏任何文字；
- compositionupdate：拼音变化或候选词滚动时触发（非所有浏览器都稳定派发，可忽略）；
- compositionend：用户确认上屏（按空格、回车或点击候选词），此时 DOM 中的值才真正更新为选中的汉字（如 “中”）。
为什么不能只监听 input 或 keydown？
直接监听 input 会在每次拼音输入（如 “z” → “zh” → “zho” → “zhon” → “zhong”）都触发，导致误判为用户已输入了这些字母；而 keydown 更糟——它捕获的是物理按键，完全无法反映输入法最终输出的汉字。例如：
- 按一次 “z” 键 → 触发 keydown，但页面还什么都没显示；
- 拼音 “zhong” 完成后按空格 → 触发 compositionend + input，这时才是真正的“中”上屏；
- 若在 composition 过程中监听 input，你会收到 “zhong” 字符串，但它只是临时拼音，不是用户要提交的内容。
推荐的中文输入处理模式
用布尔标记 + 合成事件控制输入时机，确保只在真实文字上屏后响应：
立即学习“Java免费学习笔记（深入）”；
- 声明一个状态变量：
let isComposing = false; - 监听
compositionstart→ 设isComposing = true;； - 监听
compositionend→ 设isComposing = false;，并在此刻读取event.target.value或触发业务逻辑； -
input 事件中加判断：
if (!isComposing) { /* 处理真实输入 */ }，这样可过滤掉拼音过程中的干扰。
实际代码片段示例
以下是一个防抖+合成控制的输入处理逻辑：
const inputEl = document.getElementById('myInput');
let isComposing = false;
<p>inputEl.addEventListener('compositionstart', () => {
isComposing = true;
});</p><p>inputEl.addEventListener('compositionend', (e) => {
isComposing = false;
// 此时 e.data 是上屏的文本（如“你好”），e.target.value 是完整输入框值
handleRealInput(e.target.value);
});</p><p>inputEl.addEventListener('input', (e) => {
if (!isComposing) {
// 真实内容变更（包括英文、粘贴、删除、以及中文上屏后）
handleRealInput(e.target.value);
}
});
