autofocus属性仅在HTML初始解析时对首个可见、可聚焦且未禁用的原生控件生效一次，后续JS操作、框架渲染、隐藏元素或iOS Safari均不触发；应改用JavaScript手动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→ 解析时不可见，直接跳过 - iOS Safari 几乎总是静默忽略
autofocus，这是策略限制，不是 bug
哪些元素真正支持 autofocus
不是所有 <input> 都行，必须同时满足：原生可聚焦 + 未 disabled + 初始 display 可见（非 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">
真正可靠的聚焦方式：用 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()
容易被忽略的是：哪怕 focus() 成功，软键盘也可能遮挡输入框，尤其在 position: fixed 区域或 viewport 缩放后；此时得配合 element.scrollIntoView({ block: 'nearest' }) 手动滚动校正。
