autofocus仅对原生可聚焦表单元素（如input、textarea、select、button）有效，且只在html解析完成时对dom中第一个该属性元素生效；动态添加或非编辑态input、contenteditable元素等均无效。
用 autofocus 属性就能让元素加载时自动获得焦点，但只对页面中第一个带该属性的可聚焦元素生效，且不能通过 JS 动态添加后触发。
哪些元素支持 autofocus？
只有原生可聚焦（focusable）的表单控件才真正起作用，比如 input、textarea、select、button。像 div 或 p 即使加了 tabindex 也不响应 autofocus。
-
input类型必须是可编辑的（type="text"、"email"、"search"等），type="hidden"或disabled状态下无效 -
contenteditable="true"的元素不认autofocus，得靠 JS 调用.focus() - 若多个元素都写了
autofocus，浏览器只对 DOM 中第一个生效，其余被忽略
autofocus 在什么时机起作用？
它在 HTML 解析完成、元素插入文档流后立即触发，早于 DOMContentLoaded。这意味着：
- 服务端渲染（SSR）或静态 HTML 中写死的
autofocus最可靠 - 通过 JS 动态插入带
autofocus的元素（如innerHTML += '<input autofocus>'）不会触发聚焦 —— 浏览器不重新解析该属性 - Vue/React 等框架中直接写
autofocus可能被忽略（取决于模板编译方式），更稳妥的是用ref+mounted或useEffect调用.focus()
移动端和无障碍要注意什么？
部分 iOS Safari 和旧版 Android WebView 会忽略 autofocus，尤其在页面从后台切回或 iframe 场景下；同时，自动弹出软键盘可能打断用户操作流。
立即学习“前端免费学习笔记（深入）”；
- WCAG 2.1 建议避免非用户触发的自动聚焦，除非是模态框首次打开等明确上下文
- 如果页面顶部有 banner 或导航栏，
autofocus可能导致视口意外滚动，可配合scroll-margin-top调整定位 - 测试时务必在真机上验证：iOS 上
input加了autofocus却没弹键盘，大概率是 Safari 主动抑制了
真正麻烦的不是怎么写这个属性，而是它“只生效一次”+“无法重试”的特性 —— 页面加载失败重试、动态 tab 切换、SPA 路由跳转后想再次聚焦，都得切到 JS 控制，别指望 autofocus 拿来反复用。
