键盘焦点与操作顺序

本节用焦点日志验证文档顺序、原生可聚焦元素和焦点返回。

<button id="open">打开</button><input id="name" placeholder="姓名"><button id="save">保存</button>
<script>
  document.addEventListener('focusin', event => console.log(event.target.id))
</script>

只用 Tab 记录 open → name → save；加入 tabindex="1" 后再移除，比较人工顺序和 DOM 顺序。

规则与边界

• 平台保证、浏览器实现和业务约定必须分开；一个浏览器中的结果不能自动推广到所有宿主。
• 每个监听器、请求、观察器、缓存和焦点操作都要有清理/取消责任；页面或组件离开后不能继续写状态。
• 用户输入、URL、HTML、消息和持久化数据按不同信任边界处理；类型正确不代表内容可信。
• 失败、取消、超时、权限拒绝、配额不足和不支持要有不同的可观察结果。

机制拆解

焦点顺序由文档顺序、原生可聚焦元素和 tabindex 共同决定。tabindex="0" 把自定义控件加入正常顺序，正数 tabindex 会制造难以维护的人工顺序；弹层、菜单和列表还需要定义焦点返回策略。

可运行实验

<button id="open">打开</button><input id="name" placeholder="姓名"><button id="save">保存</button>
<script>
  document.addEventListener('focusin', event => console.log(event.target.id))
</script>

只用 Tab 记录焦点序列；加入一个 tabindex="1" 再移除它，比较 DOM 顺序与键盘顺序。

练习

1. 只用 Tab 记录三个控件的焦点序列，并用 document.activeElement.id 验证。
2. 加入正数 tabindex 后解释顺序为何脱离 DOM，随后恢复为 0。
3. 设计对话框打开与关闭时的焦点返回断言。 查看本节答案

下一步

完成答案核对后继续本章下一篇，并把实验日志保存在自己的项目中。