IME输入问题的根本原因是误在composition过程中触发状态重置；应监听compositionstart/compositionend事件暂存内容，避免input事件中直接更新状态或清洗值。
IME输入时表单字段突然失焦或值被清空
这是最典型的症状：用户在中文、日文等需要输入法编辑器（IME）的场景下，刚点开输入框、还没选词就自动失去焦点，或者按空格/回车确认候选词后，input 值变为空字符串。根本原因不是浏览器 bug，而是监听了 input 或 change 事件后，在 IME 组合过程中误触发了状态重置（比如 React 中直接用 setState({ value: e.target.value })）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Web 应用中，对受控组件（如 React 的
input）务必区分 IME 状态：监听compositionstart和compositionend，期间暂存原始输入，避免在input事件中更新状态 - 原生 JS 场景下，不要在
input事件里直接读e.target.value并做清洗或截断——这会打断 IME 的内部缓冲，导致候选词无法上屏 - Vue 3 的
v-model默认已处理 composition，但若手动绑定@input，仍需加.lazy或自行拦截compositionstart
React 中 useState 更新导致 IME 输入中断
React 函数组件里，每次 setState 都可能触发重渲染；而 IME 输入过程中的 input 事件非常频繁（比如拼音“zhong”每按一个键都发一次），高频 setState 不仅卡顿，更会让浏览器误判为“DOM 被外部修改”，从而强制关闭当前 IME 会话。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
useRef缓存当前输入中的未完成内容，在compositionend后再同步到 state - 不依赖
input事件更新 state，改用onChange（它天然忽略 composition 过程中的中间态） - 如果必须响应实时输入（如搜索建议），加防抖：只在
compositionend或非 IME 状态下的input事件中触发请求
contenteditable 区域比 input 更难适配 IME
富文本编辑场景下，contenteditable 对 IME 的支持更脆弱。常见现象是：输入中文时光标跳到开头、候选框位置偏移、回车后换行失效。这是因为浏览器对 contenteditable 的 IME 行为没有统一规范，各引擎（WebKit/Gecko/Blink）实现差异大。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 避免在
contenteditable内部动态插入/删除节点（比如实时高亮关键词），这会重置 IME 上下文 - 设置
style="white-space: pre-wrap"可缓解换行错乱，但不能解决光标漂移 - 真正稳定的方案是：用原生
input或textarea承载输入，把富文本渲染和输入逻辑分离（即“输入层”与“展示层”解耦）
移动端 Safari 的 IME 特殊行为
iOS Safari 在软键盘弹出时会缩放页面、重排布局，且对 inputmode 属性支持有限。典型问题是：输入中文后点击「完成」，焦点没离开但输入法已收起，再次点击输入框不唤起键盘；或使用 type="search" 时，中文候选栏被遮挡。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
input显式设置inputmode="text"（而非依赖type推断），iOS 对该属性响应更稳定 - 避免在
focus回调里执行 DOM 插入、class 切换等可能触发重排的操作 - 监听
resize事件不如监听keyboardWillShow（iOS 16.4+）可靠，但后者需配合 WebKit 特定 meta 配置，兼容性差，现阶段仍建议用visualViewport监听高度变化
IME 适配不是加个事件监听就能搞定的事——它本质是和浏览器输入管道的博弈。最容易被忽略的，是把“输入完成”等同于“用户敲了回车”，而忽略了 compositionend 才是 IME 真正交出控制权的信号。一旦混淆这个边界，所有防抖、校验、同步逻辑都会跑偏。
