autofocus在ios safari中静默失效是apple明确的设计策略，为防止非用户手势触发键盘弹出打断体验；android chrome、微信webview等也趋严拦截，且仅html初始解析时生效，spa路由切换后无效。
autofocus属性在iOS Safari中为何静默失效
不是bug，是Apple明确的设计策略：防止非用户手势触发的键盘弹出打断浏览体验。哪怕源码里写了autofocus，iOS Safari在页面加载、iframe内、或后台切前台时都会直接忽略。Android Chrome近年也趋严，微信WebView等环境同样拦截。
常见误判：document.querySelector('input').focus()在DOMContentLoaded里调用仍失败——因为iOS要求必须在用户手势（如click、touchstart）回调中执行，否则静默拒绝。
- 可靠做法：给按钮或容器绑定一次
click，回调中立即调用input.focus() - 若需自动触发（如模态框打开），可监听
touchstart并preventDefault()后聚焦，但需注意首次交互限制 - 不要依赖
setTimeout或requestAnimationFrame绕过该限制，iOS不认
SPA路由切换后input无法自动聚焦的根源
autofocus只在HTML初始解析时生效，而React/Vue路由切换只是DOM更新，不是新页面加载。框架渲染后的<input autofocus>在hydrate后已“过期”，浏览器不会再检查它。
典型失效场景：v-if控制的登录弹窗、React.lazy动态加载的表单、Next.js/Remix的客户端导航后组件挂载。
- React中必须用
useEffect配合ref，且加if (typeof window !== 'undefined')防SSR报错 - Vue 3中用
onMounted，但要确保v-if条件为true后才执行 - 聚焦前务必检查
document.activeElement !== input，避免覆盖用户当前输入
移动端软键盘意外弹出的规避要点
自动聚焦在移动端极易遮挡内容，尤其模态框或小屏设备。Chrome和Safari虽允许.focus()，但不保证键盘弹出；iOS甚至可能聚焦成功却无键盘响应。
- 对非主流程输入框（如页头搜索），改用用户点击后聚焦，而非页面加载即触发
- 模态框中使用
{ preventScroll: true }选项：input.focus({ preventScroll: true })，避免焦点滚动导致内容偏移 - 若必须自动聚焦，CSS中设置
scroll-margin-top: 60px预留顶部空间，防止被导航栏遮挡
多个autofocus共存时的实际行为
HTML规范明确：同一文档中，只有第一个被解析到的autofocus元素生效，其余全部静默忽略。这不是浏览器差异，而是标准行为——源码顺序决定优先级，与渲染顺序、JS挂载顺序无关。
容易踩坑的写法：document.body.innerHTML = '<input autofocus><input autofocus>'，或Vue模板中多个v-for生成带autofocus的input。
- 静态HTML中，确保只有一个
autofocus，且放在最靠前的可聚焦元素上 - 服务端渲染时，避免模板引擎重复注入
autofocus（如循环中未加条件判断） - 调试时用
console.log(document.querySelector('[autofocus]'))确认实际生效的是哪个元素
autofocus，而是它何时根本不会运行——比如你刚把登录框从display: none切到block，或者用户在iOS上第一次打开标签页，又或者SPA跳转后DOM已挂载却没触发任何事件。这些时刻，.focus()不是备选方案，是唯一路径。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
