前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
首页程序员面试题库tabindex 键盘导航 顺序 0 -1
HTML语义与文档

tabindex 的 0、-1 和正数分别怎样影响键盘焦点?

tabindex="0" 让元素按 DOM 顺序进入 Tab 路径;-1 通常跳过顺序 Tab,但脚本仍可聚焦。正数会排在普通焦点项前面,常使导航顺序难以维护。

前端进阶之旅 · 一题精讲更新于 2026.09.29
HTML#语义与文档
先看核心答案读代码示例
理解线索

焦点顺序来自结构

  1. 自然焦点原生控件按文档顺序参与导航
  2. tabindex="0"把元素加入自然焦点序列
  3. tabindex="-1"保留脚本聚焦能力但跳过顺序 Tab

CSS Grid 或 Flex 改视觉顺序,不会自动改键盘 Tab 顺序。

核心回答

先记住这个答案

原生按钮、链接和表单控件本来就会进入键盘焦点顺序。需要让一个非原生元素参与顺序 Tab 时可设 tabindex="0",它按 DOM 位置排列;设 -1 时,脚本可调用 focus(),但通常不会由连续按 Tab 走到。正数会排在自然焦点项之前,随着页面动态变化很容易跳来跳去,通常应改 DOM 顺序。

  • 0 按 DOM 顺序参与 Tab
  • -1 可由脚本聚焦
  • 正数先于自然顺序
  • 优先调整 DOM 而非编号焦点

错误摘要适合程序聚焦

表单提交失败时,顶部错误摘要要被读屏及时读到,但不需要让每次 Tab 导航都停在上面。给它 tabindex="-1",失败时移动焦点即可。

失败时移到摘要HTML
<div id="error-summary" tabindex="-1">
  请检查标红的字段
</div>
<button type="submit">保存</button>
<script>
  // 校验失败时调用
  document.querySelector('#error-summary').focus()
</script>

脚本调用 focus() 后,用户可以从错误摘要了解问题;正常使用时按 Tab 仍主要走交互控件。负值不是“完全不能聚焦”,而是退出顺序焦点导航。 错误摘要获得焦点后,视觉焦点也应清晰可见,尤其要让键盘用户知道页面跳到了哪里。错误处理完成后通常让用户继续按自然顺序进入第一个需要修改的字段;不要在每次输入时反复抢焦点,否则读屏还没读完提示就被打断。 如果给每个字段写 tabindex="1"、2、3,后面插入新字段就要重新编号。页面其他组件还可能使用正数,局部编号无法保证全页顺序。

焦点路径应跟操作流程一致

CSS 可以把按钮视觉上挪到输入框之前,Tab 路径却仍按 DOM 中先后顺序走。鼠标用户看到的排列与键盘用户的操作顺序不一致,会增加误操作。

先让 HTML 结构体现任务流程,默认焦点顺序就会较自然。对话框打开、错误发生等特殊时刻再用程序移动焦点,而不是持续靠正数 tabindex 修补页面结构。

这里还要分清“能被脚本聚焦”和“具有正确交互语义”。给普通 <div> 加 tabindex="0",它虽然能进入 Tab 顺序,却不会自动变成按钮:按 Enter、空格是否能操作、读屏如何称呼,都需要另外处理。能用原生 <button> 的场景应直接用按钮,省掉键盘事件与角色补丁。

tabindex="-1" 也不是让内容对读屏不可见。它只影响顺序焦点导航;读屏用户仍可能通过阅读命令遇到这段内容。若需求是隐藏内容,要用适合该状态的隐藏方式,不能靠负数 tabindex 解决。

回答前,多想一步

容易答错的地方

认为 -1 表示脚本也不能聚焦
它通常只移出顺序 Tab,focus() 仍可使用。
认为 CSS 视觉重排会同步焦点顺序
焦点路径主要看 DOM 与 tabindex,不是屏幕坐标。
试着用自己的话回答

面试官还会怎么问?

按钮需要写 tabindex="0" 吗?

通常不需要,原生按钮已经可以按自然顺序聚焦。

什么时候用正数?

绝大多数页面不需要。正数打乱全局顺序,优先调整 DOM 结构。

给普通段落加 tabindex="0" 合适吗?

只有用户确实需要在键盘导航中停留时才加,例如交互区域;不要把所有文字都塞进 Tab 路径。

从一道题,走向一组知识

把知识连起来

语义与文档

给表格加标题,用 <caption> 和 aria-label 有什么区别?

表格标题为读屏提供名称,焦点顺序不能代替表格语义。

语义与文档

表格里的 th 和 scope 怎样帮读屏找到表头?

tabindex 控制能否走到表格附近,scope 决定读到数据格时能否听懂行列标题;焦点顺序不能替代表头关联。

参考资料

  • MDN 参考文档

示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。

本题目录
  1. 先记住这个答案
  2. 错误摘要适合程序聚焦
  3. 焦点路径应跟操作流程一致
  4. 容易答错的地方
  5. 面试官还会怎么问
  6. 把知识连起来
读懂,再试着讲出来

先看核心答案,再读代码。最后展开追问,检查自己有没有遗漏边界。

试着回答追问
浏览全部面试题理解原理,也关注真实的使用场景。回到顶部 ↑