autofocus仅在HTML初始解析时对首个可聚焦元素生效，非JS可控、不触发focus事件、iOS Safari静默失效；应改用JS手动focus()并校验挂载、可见性及用户手势上下文。
autofocus 属性只做一件事：让浏览器在**解析 HTML 字符串时**，对第一个符合条件的可聚焦元素自动调用 .focus()。它不是 JS 控制的开关，也不是“页面加载完就执行”，更不是“只要写了就一定弹键盘”——它是一次性的、静态的、受严格限制的 DOM 解析行为。
autofocus 只在初始 HTML 解析阶段生效
浏览器逐行读取 HTML 源码，遇到第一个带 autofocus 的可聚焦元素（如 <input type="text">），立刻尝试聚焦；之后任何 JS 操作都不会重新触发它。
-
document.getElementById('form').innerHTML = '<input type="text" autofocus>'→ 完全无效，DOM 已解析完毕 -
input.autofocus = true或input.setAttribute('autofocus', '')→ 不会触发聚焦 - Vue/React 组件挂载后渲染的
<input autofocus>→ SSR hydration 或 v-if 切换后不生效 - 页面从后台标签页切回、iframe 内加载、或 iOS Safari 中 → 大概率静默忽略
哪些 input 类型真正支持 autofocus
不是所有 <input> 都能响应 autofocus，必须同时满足：可聚焦 + 可交互 + 未被禁用。
- ✅ 稳定支持：
type="text"、type="search"、type="email"、type="password"、type="tel"、type="url"、type="number"、type="date"、<textarea> - ⚠️ 条件支持：
<button>（Chrome/Firefox 行为一致，Safari 偶尔跳过）、<select>（Firefox 和旧版 Safari 明确不支持） - ❌ 明确不支持：
type="hidden"、type="checkbox"、type="file"（安全策略拦截）、type="range"、type="color"、disabled或readonly的元素 - 隐藏即失效：
display: none、visibility: hidden、inert或tabindex="-1"包裹的元素，autofocus被直接跳过
iOS Safari 中 autofocus 几乎总是静默失效
这不是兼容性 bug，而是 Apple 主动设计的限制：防止非用户手势触发软键盘遮挡内容。它不报错、不警告，只是忽略。
立即学习“前端免费学习笔记（深入）”；
- 独立登录页加了
autofocus→ iOS 用户打开页面时大概率没反应 - 模态框
show()后的<input autofocus>→ 失效，除非聚焦逻辑包裹在onclick或ontouchend回调里 - 即使
.focus()成功，软键盘也可能不弹出；此时需引导用户点击输入框 -
.focus({ preventScroll: true })才能避免意外滚动，而autofocus没这个能力
该用 autofocus 还是手动 focus()
只要不是纯静态 HTML 页面，都应该放弃 autofocus，改用 JS 显式控制 .focus() 并加防护逻辑。
- 检查元素是否真实挂载：
input.offsetParent !== null（排除display: none） - 避免覆盖用户已有操作：
if (document.activeElement !== input) - 移动端必须绑定在用户手势后：
button.addEventListener('click', () => input.focus()) - SPA 中应在组件挂载钩子（如 Vue 的
mounted、React 的useEffect）中调用，而非依赖 HTML 属性
真正要实现“挂载即聚焦”，autofocus 是个快捷但脆弱的开关；而 .focus() 才是可控的执行动作。别指望一个属性解决所有场景，尤其当涉及条件渲染、延迟加载或移动端交互时——它的限制比你想象得更硬、更早、更不可绕过。
