Tab键导航时焦点顺序不对怎么办?
我做了一个表单,但用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>
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顺序就是最合理的。