autofocus在button上无效是因为它仅在HTML初始解析时生效，要求button必须存在于初始DOM、未被禁用或隐藏，且不处于iOS Safari等静默忽略该属性的环境；动态渲染或条件显示的button需手动调用focus()并确保时机正确、元素可聚焦。
autofocus 在 button 上写了但没反应，为什么？
autofocus 属性对 <button> 确实合法，但它只在页面首次 HTML 解析完成时生效，且必须满足全部前提：
- 按钮已存在于初始 DOM（不能是 Vue/React 动态挂载、
innerHTML插入或条件渲染后才出现） - 按钮未被
disabled、hidden或父级inert阻断 - 按钮未被 CSS 隐藏（
display: none或visibility: hidden） - 页面未处于 iOS Safari 环境（该平台静默忽略所有
autofocus）
写成 <button autofocus>提交</button> 却没聚焦，大概率是上述某条不满足。它不会报错，也不会重试，浏览器“看一眼就跳过”。
DOMContentLoaded 后手动 focus() 的安全写法
直接调用 .focus() 是更可控的方案，但时机和判断缺一不可：
- 必须等
document.readyState === 'interactive'或监听DOMContentLoaded - 聚焦前检查当前焦点位置，避免覆盖用户已有操作：
if (document.activeElement !== btn) - 移动端需注意：iOS Safari 会拦截非用户手势触发的
.focus()，若按钮在模态框或路由切换后出现，应绑定到用户点击后再聚焦 - 示例：
document.addEventListener('DOMContentLoaded', () => { const btn = document.querySelector('#submit-btn'); if (btn && document.activeElement !== btn) { btn.focus(); } });
dialog.showModal() 后按钮无法聚焦的典型陷阱
<dialog> 打开时，浏览器会将焦点重置到 dialog 自身或其第一个可聚焦子元素，autofocus 完全失效：
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
<button autofocus>，必须显式调用.focus() - 不能紧接在
dialog.showModal()后立即调用 —— 某些浏览器尚未完成焦点管理初始化 - 推荐用
focusin事件监听 dialog 获得焦点后的首次进入：dialog.addEventListener('focusin', handler, { once: true }); function handler() { confirmBtn.focus(); } - 确保
confirmBtn已渲染、未disabled、无inert父级、且不在display: none容器中
按钮聚焦失败的常见硬性限制
即使代码逻辑正确，以下情况会导致 .focus() 静默失败或被忽略：
- 按钮设置了
disabled→ 改用tabindex="-1"+ CSS 视觉禁用 - 按钮被包裹在
display: none的父容器中（哪怕 dialog 已showModal()）→ 确保 CSS 切换为display: block后再聚焦 - 使用了自定义元素如
<div role="button">→ 必须显式加tabindex="0"，否则.focus()无效 - SSR 渲染场景下，服务端无
window对象 → 先做if (typeof window !== 'undefined')判断
真正容易被忽略的是：移动端软键盘自动弹出可能遮挡内容，尤其在小屏设备上；如果按钮不是核心操作入口（比如只是“取消”），强行聚焦反而破坏键盘导航流。
