单页应用中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 序列，干扰正常导航流。

html-to-pptx-converter

使用 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 正值、或忽略屏幕阅读器播报时机的做法，都会在复杂路由和动态组件嵌套中迅速失控。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！