Tab键导航时焦点顺序不对怎么办?

Mr-伟伟 阅读 13

我做了一个表单,但用Tab键切换输入框的时候,焦点跳来跳去完全不是按页面顺序走的,特别奇怪。

明明HTML是按从上到下的顺序写的,但Tab的时候先跳到最后一个输入框,再跳回中间那个。我试过加tabindex="0",结果更乱了……

是不是哪里被我搞错了?下面是相关代码:

<form>
  <input type="text" id="name" placeholder="姓名">
  <input type="email" id="email" placeholder="邮箱">
  <button type="submit">提交</button>
  <input type="tel" id="phone" placeholder="电话" tabindex="3">
</form>
我来解答 赞 2 收藏
二维码
手机扫码查看
1 条解答
FSD-广利
问题很简单,就是这个 tabindex="3" 搞的鬼。

当表单里只有部分元素设置了 tabindex 时,浏览器会先把所有 tabindex > 0 的元素按数字从小到大排一遍,剩下的 tabindex="0" 或没有设置的在后面按DOM顺序走。

所以你现在的顺序实际是:
1. phone(tabindex="3",数字最大反而最前面)
2. name → email → button(都是默认的0,按DOM顺序)

解决办法有两个:

方法一:把 tabindex 删掉,让phone也用默认的0,这样就按DOM顺序来了。

方法二:统一用 tabindex,给每个元素按顺序排:







一般情况用方法一就行,别手贱乱加 tabindex,浏览器默认的DOM顺序就是最合理的。
点赞 1
2026-03-11 14:02