单页应用中focus()不生效主因是DOM未挂载完成就调用；应等元素可交互后再聚焦，如Vue用onMounted+setTimeout、React用useEffect+ref；路由后焦点应落于tabindex="-1"的主内容区占位元素并配合aria-live播报。
单页应用里 focus() 不生效的常见原因
页面切换后 DOM 元素还没挂载完成，就调用 element.focus()，结果是静默失败——既没报错，也没聚焦。React/Vue/Angular 的异步渲染机制会让这个时序问题更隐蔽。
解决的关键不是“多试几次”，而是等元素真正可交互后再聚焦：
- Vue 中用
nextTick或onMounted+setTimeout(() => el.focus(), 0)（后者更稳妥，绕过 Vue 的微任务队列） - React 中用
useEffect+ref，但需确保 ref 已绑定到真实 DOM 节点，且组件已 commit（避免在 render 阶段调用 focus） - 原生 JS 场景下，监听
focusin事件不如直接用MutationObserver监听容器插入，或用requestIdleCallback延迟到空闲帧再尝试
路由跳转后焦点该落到哪
不能默认聚焦到 document.body 或第一个 input，这会破坏键盘用户的导航预期。标准做法是：主内容区顶部加一个 tabindex="-1" 的占位元素，路由就绪后立即 focus() 它，并配合 aria-live="polite" 向屏幕阅读器播报页面变更。
示例结构：
立即学习“前端免费学习笔记（深入）”；
<main id="main-content" tabindex="-1" aria-labelledby="page-title"> <h1 id="page-title">用户列表</h1> <!-- 列表内容 --> </main>
跳转完成后执行：
document.getElementById('main-content').focus();注意：不要用 tabindex="0"，否则它会混入 Tab 序列，干扰正常导航流。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
模态框打开时的焦点陷阱（focus trap）
只把焦点移到第一个输入框远远不够。用户按 Tab 键必须被限制在模态框内部，Shift+Tab 也得循环回最后一个可聚焦元素——否则焦点会“逃逸”到背景页面，造成键盘用户迷失。
实现要点：
- 模态框打开时，记录当前
document.activeElement，关闭时恢复 - 监听
keydown，捕获 Tab 键：若焦点在最后一个元素上再按 Tab，preventDefault()并手动focus()第一个；反之亦然 - 所有可聚焦子元素必须显式声明
tabindex（哪怕只是0），因为某些框架生成的元素（如自定义组件）可能不继承默认可聚焦性
autofocus 在 SPA 中为什么更危险
HTML 的 autofocus 属性在 SPA 里基本不可控：它只在初始 HTML 解析时触发，后续路由切换完全无效；而手动模拟 autofocus 又容易踩中无障碍雷区。
真正要避免的是“突然打断用户”。比如从列表页点进详情页，如果详情页自动聚焦到某个编辑按钮，用户正用键盘浏览标题，光标却跳走了——这就是反模式。
可行替代方案：
- 仅在用户明确触发的操作后聚焦，例如点击“编辑”按钮后，才将焦点移至第一个表单项
- 用
aria-describedby指向操作反馈区域，代替强行聚焦 - 对搜索页等强意图场景，可接受
autofocus，但必须配合scrollIntoView({ block: 'nearest' })防止视口跳动
最常被忽略的一点：焦点管理不是“让某个元素亮起来”，而是维护一套稳定的、可预测的键盘导航契约。任何绕过 DOM 顺序、滥用 tabindex 正值、或忽略屏幕阅读器播报时机的做法，都会在复杂路由和动态组件嵌套中迅速失控。
