autofocus属性仅在页面首次加载时对首个可见、可聚焦且未禁用的原生控件生效一次，动态插入、JS操作或模态框显示后均无效；iOS Safari默认忽略；可靠方案是JS手动focus并校验挂载、可见性及焦点抢占。
autofocus 属性在绝大多数真实场景中不可靠，别指望它“写上就聚焦”——它只在 HTML 初始解析时对第一个可见、可聚焦、未禁用的原生控件起一次作用，之后全失效。
autofocus 只在页面首次加载时生效，动态插入完全无效
浏览器只扫描原始 HTML 字符串，遇到 autofocus 就尝试聚焦；后续任何 JS 操作（innerHTML、appendChild、Vue/React 组件挂载）都不会触发它。
-
document.body.innerHTML = '<input type="text" autofocus>'→ 属性存在，但不聚焦 - Vue 模板里写
<input autofocus />→ SSR 或 hydration 后 DOM 已存在，错过时机 - 模态框初始
display: none，JS 切成block→ 解析时不可见，直接跳过
哪些元素真正支持 autofocus？状态比类型更关键
不是所有 <input> 都行，必须同时满足：原生可聚焦 + 未 disabled + 初始 display: block|inline（非 none 或 visibility: hidden）+ 无 inert 父级。
- ✅ 安全可用：
<input type="text">、<input type="email">、<textarea>、<button> - ⚠️ 条件可用：
<select>（Chrome/Edge 支持，Firefox 和旧 Safari 忽略，错误信息：autofocus is not supported on <select>） - ❌ 完全无效：
<input type="hidden">、<input disabled>、<div autofocus>、<input style="display:none">
iOS Safari 几乎总是静默忽略 autofocus
这不是 bug，是策略限制：iOS 禁止非用户手势上下文中的自动键盘弹出。autofocus 属于“非交互式加载行为”，直接被跳过。
立即学习“前端免费学习笔记（深入）”；
- 首页写
<input autofocus>→ 光标不动，键盘不弹 - 模态框
show()后调input.focus()，若没包裹在click或touchstart回调里 → 依然失败 - 即使聚焦成功，软键盘可能遮挡输入框，尤其在
position: fixed区域或 viewport 缩放后
真正可靠的方案：用 JavaScript 手动 focus()，并校验三个条件
删掉 HTML 中所有 autofocus，统一用 JS 控制——确保元素已挂载、可见、且未被用户主动抢占焦点。
- 原生 JS：
DOMContentLoaded后检查document.activeElement !== input，再调input.focus() - React：
useEffect(() => { inputRef.current?.focus() }, [])，加if (typeof window !== 'undefined')防 SSR 报错 - Vue 3：
onMounted(() => inputRef.value?.focus())，确保v-if已为 true 或元素已渲染 - 移动端兜底：绑定一次
click或touchstart到按钮或body，回调中立即调input.focus()
最容易被忽略的是焦点抢占问题：autofocus 不触发 focus 事件，也不保证键盘弹出；而 JS 的 .focus() 若没做 activeElement 判断，可能强行覆盖用户正在操作的输入框，破坏可访问性。
