autofocus属性仅在HTML初始解析时对首个可聚焦元素生效，不支持动态添加或JS控制；失效主因包括动态插入、隐藏状态、多autofocus及移动端限制。
autofocus 属性只在页面初始 HTML 解析时生效
它不是 JS 可动态控制的开关，而是浏览器在解析 DOM 时“一次性触发”的行为。只要元素在原始 HTML 中存在、未被 disabled 或 readonly、且是可聚焦类型，浏览器就会在加载完成时尝试聚焦它。
常见失效场景包括：
-
innerHTML = '...<input autofocus>...'动态插入 —— autofocus 被忽略 - Vue/React SSR 渲染后 hydrate，DOM 是 JS 挂载的，autofocus 不起作用
- 元素初始
display: none或visibility: hidden—— 浏览器跳过聚焦 -
<input type="hidden" autofocus>或<div autofocus></div>—— 元素本身不可聚焦，属性无效
哪些元素能用 autofocus，哪些不能
只有原生可聚焦的表单控件才支持，且必须满足“可交互”前提：
- ✅ 支持：
<input type="text">、<input type="email">、<input type="search">、<input type="password">、<textarea>、<button>、<select>（部分浏览器） - ⚠️ 有条件支持：
<input type="color">—— autofocus 属性存在且可读写，但 Safari 和 IE 不支持该 input 类型本身 - ❌ 不支持：
<input type="hidden">、<input disabled>、<div tabindex="0">（即使加了tabindex，autofocus 仍不生效）
多个 autofocus 元素会发生什么
HTML5 规范明确：只对文档中第一个解析到的 autofocus 元素生效，其余全部忽略。这不是浏览器 bug，而是标准行为。
立即学习“前端免费学习笔记（深入）”；
容易误判的情况：
- 模板里写了两个
autofocus，但第二个没聚焦 —— 不是失效，是被规范跳过了 - 服务端渲染 + 客户端 JS 同时设 autofocus —— 客户端 setAttribute 不会触发聚焦，且可能干扰首次解析逻辑
- 密码管理器或翻译插件劫持焦点 —— 页面加载后焦点被抢走，看起来像 autofocus 失效，但实际它已成功执行过
比 autofocus 更可靠的做法：JS 显式 focus()
尤其在 SPA、模态框、条件渲染等场景，直接用 JS 控制更可控：
const input = document.getElementById('search-input');
if (input && document.activeElement !== input) {
input.focus();
}
关键点：
- 加
document.activeElement !== input判断，避免覆盖用户已有操作（比如用户刚点过别的输入框） - 不要用
setTimeout盲等，优先监听DOMContentLoaded或框架的挂载钩子（如 React 的useEffect+useRef） - 移动端慎用：自动弹出软键盘可能遮挡内容，建议结合
matchMedia('(pointer: coarse)')做降级
autofocus 看似简单，但真正稳定可用的往往是那行 input.focus() —— 它不依赖解析时机，不被插件干扰，还能做条件判断。
