autofocus属性仅在页面首次加载时对首个已挂载、可见且未禁用的原生button生效，其为HTML解析阶段行为，不触发focus事件，且在iOS Safari等移动端常因无用户手势而失效。
autofocus 属性能让 <button> 在页面加载时自动获得焦点，但它的生效有明确前提：元素必须已挂载、可见、未禁用，且整个文档中只能有一个 autofocus 元素——否则浏览器只认第一个，其余被忽略。
哪些 button 元素能用 autofocus？
所有原生 <button> 都支持 autofocus，无论 type="button"、type="submit" 还是 type="reset"。但以下情况会失效：
-
<button disabled autofocus>——disabled会彻底阻断聚焦 -
<button style="display: none" autofocus>或visibility: hidden—— 元素不可见时浏览器跳过聚焦 - 多个
button同时写autofocus—— 只有 DOM 中第一个解析到的生效，不报错也不提示
autofocus 和 JavaScript 的 focus() 本质区别在哪？
autofocus 是 HTML 解析阶段的行为，由浏览器在 DOM 构建完成但脚本尚未执行时触发；而 element.focus() 是运行时命令，需手动控制时机。关键差异包括：
-
autofocus只在页面首次加载时生效一次，SPA 路由切换或动态插入的button即使带该属性也完全无效 -
autofocus不触发focus事件（部分旧版 IE 可能例外），如需监听，必须用 JS 绑定 -
element.focus()可配合requestAnimationFrame或setTimeout(() => el.focus(), 0)确保元素已渲染并可见，更适合模态框、动态表单等场景
iOS Safari 和移动端的 autofocus 表现为何不稳定？
iOS Safari 默认阻止非用户手势触发的键盘弹出，因此即使 <button autofocus> 渲染成功，焦点也可能被静默丢弃——尤其在无用户交互就显示的弹层中。应对策略包括：
立即学习“前端免费学习笔记（深入）”；
- 若按钮用于触发模态框（如“登录”按钮），不要给按钮本身加
autofocus，而应在模态框显示后对内部输入框调用focus() - 避免在
window.onload之前尝试focus()，优先用DOMContentLoaded或requestAnimationFrame - 对无障碍敏感的场景，确保按钮有明确语义（如
role="button"）和键盘可操作性（tabindex="0"），别只依赖autofocus
真正容易被忽略的是：autofocus 不是“让元素获得焦点”的万能开关，而是“让浏览器在特定时机尝试聚焦”的声明。它不处理条件判断、不响应 DOM 变化、不兼容动态内容——这些都得靠 JS 补位。
