如何利用 HTML 基础标签的 autofocus 属性在运行环境初始化时自动聚焦逻辑节点

autofocus仅在HTML初始解析时生效一次，不响应JS操作或环境变化；仅对源码中首个可聚焦的原生表单控件有效，移动端尤其iOS Safari基本无效，需用JS手动focus并绑定用户手势。

autofocus 不是运行时初始化逻辑，它只在 HTML 初始解析阶段生效一次，且不响应任何 JS 操作或环境变化。所谓“运行环境初始化时自动聚焦”，实际并不存在——浏览器不会在 SPA 挂载、模态框显示、路由切换、SSR hydration 后重新执行 autofocus。

autofocus 只对原始 HTML 源码中的第一个可聚焦元素起作用

它不是 JS 可控的生命周期钩子，而是浏览器逐行解析 HTML 字符串时的一次性行为：

• 写在源码里：<input type="text" autofocus> ✅ 页面首次加载时可能聚焦
• el.setAttribute('autofocus', '') 或 input.autofocus = true ❌ 完全无效
• Vue/React 组件里写 <input autofocus> → SSR 渲染后 DOM 已存在，autofocus 被跳过
• 模态框从 display: none 切换为 block → 元素已存在，但初始解析早已完成，autofocus 不再触发

哪些元素能真正响应 autofocus

仅限原生可交互、可获得焦点的表单控件，且必须未被禁用、未隐藏、首屏可见：

• ✅ 稳定支持：<input type="text">、<input type="search">、<input type="email">、<textarea>
• ⚠️ 行为不稳：<select>（Firefox / 旧 Safari 忽略）、<button>（Safari 有时跳过）
• ❌ 完全无效：<input type="hidden">、<input type="checkbox">、<input disabled>、<p autofocus>
• 元素若包裹在 visibility: hidden 或 display: none 容器中，autofocus 静默失效

移动端和 iOS Safari 中 autofocus 基本不可用

Apple 明确限制非用户手势上下文中的自动聚焦，防止软键盘意外弹出：

• iOS Safari 在页面加载、后台切前台、iframe 内嵌等场景下，直接忽略 autofocus
• 即使你写了 <input type="search" autofocus>，iOS 用户打开页面时大概率无反应
• Android Chrome 也日趋严格，尤其在 WebView 或 PWA 场景中
• 若需在模态框中聚焦，必须绑定到用户事件（如 click、touchend）后再调用 .focus()

可靠替代：用 JS 手动 focus()，但必须带容错和时机判断

放弃纯 HTML 方案，改用命令式聚焦，并规避常见陷阱：

立即学习“前端免费学习笔记（深入）”；

• 检查是否已聚焦：if (input && document.activeElement !== input)，避免覆盖用户当前输入
• SPA 场景下不要依赖 useEffect(() => {}, [])，而应监听路由变化（如 useLocation）或模态框显示事件（如 shown）
• SSR 环境需加保护：if (typeof window !== 'undefined')，否则服务端报 document is not defined
• 不要用 setTimeout(() => focus(), 0) —— 容易和原生 autofocus 冲突，造成双聚焦抖动
• 移动端 iOS 必须在用户手势回调内调用 .focus()，否则静默失败

真正容易被忽略的是：autofocus 的“自动”只存在于静态 HTML 加载瞬间，一旦涉及任何动态行为（哪怕只是 CSS 动画过渡帧里的 opacity: 0），它就失效了。把它当作一个弱提示而非功能保障，才是稳妥做法。