autofocus仅在html初始解析时生效，动态插入元素无效；仅原生可聚焦表单控件支持，移动端safari基本禁用；可靠聚焦需手动focus()并校验存在性、activeelement及preventscroll。
autofocus只在HTML初始解析时生效，动态插入的元素必然失效
浏览器对 autofocus 的处理是单次、静态、不可重放的：它只扫描原始 HTML 字符串中第一个可聚焦且未被禁用的元素，在 DOM 构建完成前就执行聚焦。一旦页面进入 JS 控制阶段，autofocus 就彻底“失能”。
常见失效操作包括：
-
document.body.innerHTML = '<input autofocus>'—— 新增节点不触发重新解析 -
el.appendChild(document.createElement('input')).setAttribute('autofocus', '')—— 属性存在但无意义 - Vue/React 组件模板里写
<input autofocus>，但 SSR 渲染或 hydration 后 DOM 才挂载 —— 浏览器早已完成解析 - 通过 AJAX 加载表单片段后插入 DOM —— 无论属性多完整，浏览器视而不见
哪些元素真正支持 autofocus？不是所有“能 focus()”的都行
autofocus 只作用于原生可聚焦的表单控件，且必须满足“可交互”前提。它不看 tabindex，也不理自定义元素。
✅ 稳定支持：<input type="text">、<input type="email">、<textarea></textarea>、<button></button>
⚠️ 有条件支持：<select></select>（Firefox 不支持）、<input type="color">（Safari 不支持该类型本身）
❌ 完全无效：<input type="hidden">、<input disabled>、<div tabindex="0">、<code><p contenteditable></p> —— 即使你之后能 .focus()，autofocus 属性也从不响应
移动端 Safari 的 autofocus 基本不可用，别依赖它
iOS Safari 主动静默丢弃绝大多数 autofocus 场景，这不是 bug，而是防止软键盘意外弹出遮挡内容的设计策略。即使你在初始 HTML 中写了 <input autofocus>，只要页面没有明确的用户手势上下文（比如点击导航后加载），它大概率不会生效。
更麻烦的是：它不报错、不警告、不触发 focus 事件，你只能靠 document.activeElement 或 DevTools 的 :focus 状态去验证是否真被聚焦过。
替代方案必须带用户交互触发点：
- 按钮点击后立即调用
input.focus() - 模态框
show动画结束回调里聚焦 - 避免在
useEffect(() => {}, [])或mounted钩子中直接调用 —— 没有手势上下文，iOS 会拦截
动态加载元素的可靠聚焦：focus() + 存在性 + activeElement 校验
手动调用 .focus() 是唯一可控路径，但直接写 input.focus() 很容易翻车。关键不是“怎么调”，而是“什么时候调、调之前检查什么”。
推荐写法（以原生 JS 为例）：
const input = document.getElementById('search-input');
if (input && document.activeElement !== input) {
input.focus({ preventScroll: true });
}
必须检查的三点：
- 元素是否存在（避免
Cannot read property 'focus' of null） -
document.activeElement !== input—— 防止覆盖用户刚手动点过的其他输入框 - 加
{ preventScroll: true }—— 避免页面突然滚动到顶部，这是autofocus完全做不到的
框架中注意 SSR 安全：React/Vue 的生命周期钩子里调用前，先判断 typeof window !== 'undefined'；Vue 用 nextTick 确保 DOM 已更新；React 用 useEffect 并确保 ref 已绑定。
真正容易被忽略的是焦点抢占：密码管理器、翻译插件、甚至某些 UI 库的内部逻辑，可能在你调用 .focus() 后几毫秒内把焦点抢走 —— 这时候查控制台没报错，DOM 看着也没问题，但光标就是不在那儿。
