ios h5 页面点击空白无法收起键盘，本质是 safari 对 blur() 触发不敏感且 document.activeelement 滞后，需用 capture 阶段 touchstart 监听+settimeout 延迟 blur，并规避 css 干扰与微信 autofocus 限制。
直接结论：iOS H5 页面点击空白区域无法收起键盘，本质是 Safari 对 blur() 的触发不敏感，且 document.activeElement 在触摸事件中常滞后或未更新，必须手动干预焦点状态。
为什么 @click 或 @touchstart 监听 body 无效
在 iOS Safari（尤其 iOS 13+）中，页面点击空白时，input 或 textarea 元素未必真正触发 blur 事件；document.activeElement 可能仍为该输入框，但焦点状态未同步到 JS 层。直接监听 body@click 并调用 blur() 往往无反应——因为此时元素已“逻辑失焦”，但 DOM 状态未刷新。
实操建议：
- 不用
@click，改用document.addEventListener('touchstart', ...)，且需在事件捕获阶段注册（{ capture: true }），确保早于目标元素处理 - 必须显式判断
e.target是否非输入类元素：if (!['INPUT', 'TEXTAREA', 'SELECT'].includes(e.target.tagName)) - 调用前加一层防御：先检查
document.activeElement是否确实为可编辑元素，再执行.blur()
document.activeElement.blur() 为何有时不生效
即使 activeElement 是 input，直接调用 .blur() 在 iOS Safari 中可能被忽略——这是 WebKit 的已知限制：异步焦点管理导致同步调用失效。
实操建议：
- 加
setTimeout延迟 0ms 再调用：setTimeout(() => document.activeElement?.blur(), 0) - 避免在
touchstart中立即调用，改为touchend后触发（更稳定） - 若仍失败，降级使用
document.getElementById('xxx').blur()显式指定元素（需提前缓存 ref）
如何兼容微信内置浏览器（iOS）的 autofocus 失效
iOS 微信浏览器对自动聚焦极其保守，autofocus 属性、input.focus() 在页面加载时基本无效，且后续唤起键盘也受限。
实操建议：
- 放弃 onload 自动聚焦，改为用户首次点击某按钮后，再调用
input.focus()（微信允许“用户手势触发”的聚焦） - 给输入框绑定
@click.stop防止冒泡干扰外部 touch 监听 - 若需模拟“点击空白收起”，可额外在
input上监听@focus，记录当前 activeId，收起时只对这个 ID 调用blur()
别漏掉 CSS 和布局层面的干扰
某些 CSS 会间接阻止键盘收起：比如 position: fixed 容器内嵌输入框、overflow: hidden 的父级、或设置了 -webkit-overflow-scrolling: touch 的滚动区域，都可能导致 Safari 焦点链断裂。
实操建议：
- 移除输入框父级的
overflow: hidden，改用clip-path或透明遮罩替代 - 避免在
scroll-view或swiper内部直接放input，改用绝对定位 + 手动控制层级 - 测试时禁用所有自定义
safe-area-inset-bottom计算逻辑，确认是否因 padding 动态变化引发重绘阻塞
最易被忽略的一点：iOS Safari 的键盘收起行为高度依赖「用户是否完成了一次完整的手势」。单纯 touchstart 不够，touchend 后再判断目标是否可编辑，才是可靠起点。别省那几十毫秒的延迟。
