监听 input 事件无法区分拼音输入与最终上屏内容，必须用 compositionstart/compositionend 配合 isComposing 标志位过滤，否则会误判中间状态；submit/blur 需兜底，移动端需微任务延迟读值。
input 事件在中文拼音输入过程中会频繁触发，这不是 bug，是浏览器标准行为；直接监听 input 并做实时逻辑，必然误判“ni”“nihao”为有效输入——必须用 compositionstart/compositionend 配合标志位过滤。
为什么只监听 input 会出错
用户打“shanghai”，在按空格前，DOM 中 input.value 可能是 “shangh”，也可能还是空，input 事件却已触发多次。浏览器不保证组合阶段的 value 是稳定或有意义的，也不保证它和最终上屏内容一致。更关键的是：compositionend 总是在 input 之后触发——你读到的“最新值”，大概率仍是拼音串。
- Chrome/Firefox 中
event.target.isComposing可读，但 Safari 不支持，不能依赖 - 移动端软键盘弹起瞬间，
input.value可能滞后一帧，尤其在快速切换输入法时 - 防抖定时器若在
compositionstart里被清除，用户中途切走，修改就彻底丢失
用 isComposing 标志位过滤 input 事件
核心是：只在非组合状态下响应 input，且不干扰组合过程本身的 DOM 更新。
- 声明一个闭包变量
let isComposing = false，不要挂全局或 this 上 input.addEventListener('compositionstart', () => { isComposing = true; })-
input.addEventListener('compositionend', () => { isComposing = false; handleInput(); })—— 注意：这里要立刻调用业务逻辑，别只等下一次input input.addEventListener('input', () => { if (!isComposing) handleInput(); })
别在 compositionstart 里调 clearTimeout 或重置状态；组合过程中的 value 变化虽不可信，但它是用户意图的线索，应保留供后续参考。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
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)微任务延迟读取，避开 iOS/Safari 的 value 滞后问题 - 更稳妥的取值方式：
new FormData(form).get('field')，它内部会等待 composition 结束，比手读input.value可靠得多
移动端软键盘与 input.value 同步风险
iOS Safari 和部分安卓 WebView 中，软键盘弹出瞬间，input.value 常滞后于 UI，尤其在快速输入+切换输入法后，校验可能失败或补全错乱。
- 避免在
focus、touchstart回调中立即读input.value - 加
setTimeout(() => console.log(input.value), 0)强制进微任务队列，确保读到最新同步值 - Android 可监听
resize（软键盘弹出会改变 viewport 高度），作为辅助同步时机 - iOS 必须坚持
compositionend+input组合，不能放弃compositionend单独依赖input
最易被忽略的点：很多人以为加了防抖就万事大吉，结果用户在拼音阶段移开焦点，防抖没触发，搜索根本没发出去；或者以为 pattern 能拦住非法输入，却忘了它对粘贴、开发者工具改 DOM 完全无效——这些都不是输入法问题，但和输入法场景交织后，会让问题更难定位。
