button 的 autofocus 在弹窗中基本无效，因浏览器仅在首次解析 html 时识别该属性，且 safari 等会静默拒绝非用户手势触发的聚焦；唯一可靠方式是在用户点击等同步上下文中手动调用 button.focus() 并校验可聚焦性。
autofocus 在 button 上写再多，弹窗里也大概率不生效——这不是你代码写错了，是浏览器压根不认它。
为什么 button 的 autofocus 在弹窗里基本没用
浏览器只在页面首次 HTML 解析时扫描一次 autofocus，而弹窗（尤其是 <dialog></dialog> 或 JS 动态插入的）DOM 是后来挂载的，autofocus 属性早已“过期”。更关键的是：button 虽然支持 autofocus，但 Safari（尤其 iOS）对非用户手势触发的聚焦会静默丢弃，哪怕 DOM 已存在、元素可聚焦、也没被禁用，照样不聚焦。
- 多个弹窗共存时，只有第一个解析到的
autofocus元素有机会被聚焦，其余全忽略 -
<dialog>.showModal()</dialog>不会重新触发任何autofocus行为 - Vue/React 中
v-if或{show && <button autofocus>}</button>渲染后，autofocus仍是无效字符串
button.focus() 必须在用户手势上下文中调用
想让弹窗里的按钮获得焦点，唯一靠谱路径是手动调 button.focus()，但必须卡在用户点击、触摸或回车等同步上下文里，否则 iOS Safari 直接拒绝。
- 正确做法：绑定在打开弹窗的触发按钮上，例如
openBtn.addEventListener('click', () => confirmBtn.focus()) - 错误做法：在
useEffect、onMounted或dialog.addEventListener('shown')里调 —— 这些时机已脱离原始手势链 - 如果弹窗由路由跳转或状态变更间接触发（比如菜单项点击 → 导航 → 显示弹窗），需确保
focus()调用仍包裹在原始事件回调内，不能拆到异步钩子里
调用前必须检查 button 是否真正可聚焦
button.focus() 静默失败很常见，不是 JS 报错，而是浏览器直接跳过。原因通常是元素未满足可聚焦前提：
- 检查是否被
disabled或inert属性锁住 —— 即使视觉上可见，focus()也会失效 - 确认
button.offsetParent !== null，避免 DOM 尚未渲染完成或被display: none隐藏 - 不要依赖
tabindex="-1"后再focus()—— 它只允许程序聚焦，不参与 Tab 导航，且部分旧版 Safari 对其支持不稳定 - 推荐加一层防护：
if (confirmBtn && !confirmBtn.disabled && confirmBtn.offsetParent) confirmBtn.focus()
focus() 后别忘了 preventScroll 和键盘兼容性
原生 autofocus 没法控制滚动行为，而 button.focus() 默认会把按钮滚进视口，可能遮挡弹窗标题或触发意外布局偏移。
- 显式传参：
confirmBtn.focus({ preventScroll: true }) - 移动端尤其要注意：iOS Safari 中，即使聚焦成功，软键盘也不会因
button聚焦而弹出 —— 这是预期行为，不用强行绕过 - 如果按钮是提交入口，建议同时设置
autofocus+ 手动focus()双保险（仅限桌面端），但别指望它在 iOS 上起效
最易被忽略的点是：焦点管理不是“调一次 focus() 就完事”，而是要和弹窗生命周期、用户手势链、可访问性要求（如 Esc 后恢复焦点）绑在一起。单靠 autofocus 或裸调 focus() 都撑不起真实场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
