autofocus仅在页面首次加载时对第一个可聚焦表单元素生效，支持input（非hidden/disabled）、textarea、select、button；div等非表单元素即使设tabindex也无效，SPA中须用JS focus()替代。
只能用一次，且仅对第一个解析到的元素生效。 多个 autofocus 属性不会报错，但浏览器会静默忽略后续所有，只聚焦第一个（按 HTML 解析顺序），实际效果等同于没写。
哪些元素能用 autofocus
只有原生可聚焦的表单控件才真正支持：input（type 不为 hidden 或 disabled）、textarea、select、button。其他元素即使加了 tabindex="0"，autofocus 也无效 —— 这是规范限制，不是 bug。
常见误用包括：
<div tabindex="0" autofocus> → 无反应，<code>div不是表单控件-
<input type="hidden" autofocus>→ 被忽略，hidden输入框不可聚焦 -
<input disabled autofocus>→ 焦点被跳过，禁用状态优先级更高 -
<span data-autofocus></span>或<input _autofocus>→ 浏览器根本不识别，纯自定义属性
SPA 或动态渲染时 autofocus 失效
因为 autofocus 是 HTML 解析阶段触发的机制，只作用于初始加载时已存在于 DOM 中的元素。Vue/React 渲染的表单、innerHTML 插入、appendChild 添加的 input，哪怕带 autofocus 属性，浏览器也完全无视。
立即学习“前端免费学习笔记（深入）”；
此时必须改用 JS 主动聚焦：
const el = document.querySelector('#search-input');
if (el && !el.hasAttribute('disabled') && getComputedStyle(el).display !== 'none') {
el.focus();
}
注意：移动端 Safari 对自动弹出软键盘有限制，建议在用户交互（如点击按钮）后调用 .focus()，避免被拦截。
autofocus 的副作用和隐藏风险
它不是“锦上添花”，而是有明确上下文成本的特性：
- 屏幕阅读器用户可能跳过页面顶部重要信息，直接进入输入状态
- 页面尚未渲染完成时聚焦，会导致布局偏移（layout shift），尤其在有 banner、导航栏或广告位的页面
- 移动端首次加载就弹软键盘，可能遮挡标题或操作按钮，且无法通过 JS 可靠关闭
- 如果用户已在其他 tab 或窗口操作，焦点突然切换可能中断其上下文
真正适合的场景极少：独立登录页、搜索结果页的搜索框、模态框中唯一输入字段。其他情况，宁可用显式按钮触发聚焦更稳妥。
