autofocus仅在HTML初始解析时生效，动态渲染、隐藏元素、iOS Safari及非可聚焦表单控件（如type="hidden"）均失效；SPA和移动端须用JS手动focus()并校验挂载、可见性与用户交互状态。
autofocus 属性只在页面首次 HTML 解析时生效，不是“一加就灵”的万能开关。它适合明确意图的轻量场景（如独立搜索页），但在 SPA、移动端或复杂表单中极易失效，必须配合 JS 补位。
autofocus 什么时候会静默失败
它不是运行时逻辑，而是浏览器解析 HTML 的一次性行为。以下情况它完全不工作：
-
autofocus写在 Vue/React 渲染的模板里 —— 框架挂载 DOM 时早已错过解析时机 - 用
innerHTML替换容器内容后插入带autofocus的<input>—— 浏览器不会二次识别 - 元素初始被
display: none或v-if隐藏，之后才显示 —— 解析时不可见，聚焦被丢弃 - iOS Safari 中任何非用户手势触发的上下文（包括
DOMContentLoaded）—— 直接忽略，不报错也不弹键盘
哪些 input 类型真正支持 autofocus
不是所有 <input> 都能用，规范只允许可交互、可输入文本的类型：
- ✅ 支持：
text、search、email、password、tel、url、number、date、<textarea>、<select>（Safari 旧版不稳定）、<button> - ❌ 不支持：
hidden、checkbox、radio、file（安全策略拦截）、range、color—— 加了也白加
常见错误是给 <input type="file"> 加 autofocus，结果毫无反应，这不是 bug，是规范限制。
立即学习“前端免费学习笔记（深入）”；
SPA 和移动端必须用 JS 手动 focus()
靠 autofocus 在现代前端项目中等于放弃兼容性。可靠做法是：等 DOM 真实挂载、元素可见、且未被用户主动操作过，再调用 .focus()。
- React：用
useEffect(() => { ref.current?.focus() }, [])，别忘了if (typeof window !== 'undefined')防 SSR 报错 - Vue 3：在
onMounted里调inputRef.value?.focus()，确保v-if已为 true - 原生 JS：监听
DOMContentLoaded后检查document.activeElement !== input，避免覆盖用户当前焦点
更稳妥的移动端方案：绑定一次 click 或 touchstart 到 body，然后立即 input.focus() —— iOS Safari 只认这个上下文。
容易被忽略的体验细节
自动聚焦不是效率优化，而是交互节奏控制。几个关键点常被跳过：
- 登录页只对用户名框用
autofocus，绝不能是密码框 —— 安全风险 + 用户预期错位 - 模态框内聚焦前，先
modalElement.focus()或确保其tabindex="0"，否则焦点可能落在背景上 - 屏幕阅读器用户会直接跳到
autofocus元素，跳过顶部导航或提示 —— 若有重要 banner，应提供“跳至主内容”链接 - 软键盘在移动端弹出后遮挡输入框？检查是否设置了
scrollIntoView({ block: 'nearest' })补救
最危险的错觉是：以为加了 autofocus 就完成了聚焦逻辑。实际上，它的作用范围极窄，而 JS 聚焦的时机判断、条件防护、可访问性兜底，才是真正在解决实际问题。
