有效但支持不一：Chrome和Firefox通常生效，iOS Safari常静默忽略；仅初始HTML解析时触发，动态插入、隐藏容器、重复autofocus或iOS限制均会导致失效。
autofocus 属性对 <button> 有效吗？
有效，但支持程度不一：<button autofocus> 在 Chrome 和 Firefox 中通常能成功聚焦，Safari（尤其是 iOS）大概率静默忽略。它不是“所有浏览器都稳”的行为，而是“可能起作用但别依赖”的状态。
为什么按钮加了 autofocus 却没反应？
常见原因不是写错了，而是触发条件没满足：
-
autofocus只在 HTML 初始解析时生效 —— 如果按钮是 JS 动态插入（比如document.body.appendChild(btn)），属性存在但完全无效 - 按钮被包裹在
display: none或visibility: hidden容器中 → 解析时不可见，直接跳过 - 页面已有其他
autofocus元素（如<input type="text" autofocus>）→ 规范要求只处理第一个，后续全部丢弃 - iOS Safari 主动屏蔽非用户手势触发的自动聚焦，哪怕按钮合法、可见、排第一，也大概率不弹出焦点框
什么时候该用 button.autofocus？
仅适用于纯静态 HTML 页面、且你明确接受“在部分设备（尤其是 iOS）上失效”的场景。例如：
<!DOCTYPE html>
<html>
<body>
<form>
<input type="email" placeholder="邮箱">
<button type="submit" autofocus>提交</button>
</form>
</body>
</html>
这种写法在桌面 Chrome/Firefox 中会聚焦按钮，方便键盘用户按回车直接提交；但它不能替代交互逻辑，也不应作为关键操作路径的唯一入口。
立即学习“前端免费学习笔记（深入）”；
更可靠的替代方案：用 .focus() 替代 autofocus
尤其当按钮出现在模态框、Tab 切换后、或 SPA 路由加载完成时，必须用 JS 控制：
- 确保 DOM 已挂载且可见：监听
DOMContentLoaded或框架生命周期（如 React 的useEffect、Vue 的onMounted） - 避免覆盖用户当前焦点：
if (document.activeElement !== btn) btn.focus() - iOS 兼容性补救：绑定一次
click或touchstart到父容器，在回调里立即调用btn.focus()，否则可能被拦截 - 不要用
setTimeout(() => btn.focus(), 0)—— 容易和原生autofocus冲突，造成两次聚焦抖动
真正容易被忽略的是：按钮自动聚焦 ≠ 用户意图确认。如果按钮执行敏感操作（如删除、支付），自动聚焦反而可能引发误触，需结合语义、可访问性和用户上下文综合判断是否启用。
