应使用 compositionstart/compositionend 配合 iscomposing 标志位过滤拼音输入，仅在汉字上屏后触发 handleinput；submit/blur 时需兜底延迟读值，防抖应置于 handleinput 内部而非 input 事件上。
直接监听 input 事件 + 防抖函数，无法解决中文拼音输入时的误触发问题——这不是防抖没写对，而是事件语义本身就不匹配。
为什么防抖单独用会失效
用户打“上海”，在按下空格前，input 事件可能已触发 4–5 次："s" → "sh" → "sha" → "shang" → "shanghai"。这些值全是拼音中间态，value 不稳定、不可信，且和最终上屏内容无关。防抖只管“停多久”，不管“值有没有意义”。
- Chrome/Firefox 中
event.target.isComposing可读，但 Safari 不支持，不能作为唯一判断依据 -
compositionend总是在input之后触发，你读到的“最新值”大概率仍是拼音串 - 移动端软键盘下，
blur或submit时value可能滞后一帧，尤其 iOS
必须用 compositionstart/compositionend 配合标志位
核心是：用一个闭包变量控制是否响应 input，而不是靠防抖延时“赌用户停得够久”。
- 声明
let isComposing = false（别挂this或全局，避免多实例污染） input.addEventListener('compositionstart', () => { isComposing = true; })-
input.addEventListener('compositionend', () => { isComposing = false; handleInput(); })—— 注意这里要立刻调用业务逻辑，不能只等下一次input input.addEventListener('input', () => { if (!isComposing) handleInput(); })
这样，拼音输入全程被静默过滤，只有确认汉字后才真正响应。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
submit 和 blur 必须兜底，不能只信事件顺序
用户点提交按钮时，click → submit → compositionend 是常见时序。submit 会抢在汉字上屏前发请求。
- form 提交前检查：
if (input.isComposing !== undefined ? input.isComposing : isComposing) { e.preventDefault(); setTimeout(() => form.submit(), 0); } -
blur时不能只比对input.value和缓存值，要用setTimeout(() => { /* 再读一次 value */ }, 0)微任务延迟读取 - 更稳妥的取值方式：
new FormData(form).get('field')，它内部会等待 composition 结束，比手读input.value可靠得多
防抖仍需保留，但位置要后移
过滤掉拼音阶段后，handleInput() 才是真正有意义的输入响应。防抖应加在这里，而不是绑在 input 事件上。
- 把防抖逻辑封装进
handleInput内部，例如：const debouncedHandle = debounce(() => { /* 实际请求或校验 */ }, 300) -
compositionend和非组合态的input都调用同一个debouncedHandle - 避免在
compositionstart里清除防抖定时器——组合过程中的拼音变化虽不可信，但它是用户意图的线索，应保留供后续参考
最易忽略的点：Safari 不支持 isComposing，且移动端微任务延迟读值不是可选项，是必选项；否则在快速切输入法或连打多个词时，值就丢了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
