H5焦点管理---tabindex与document.activeElement

  周四下午测试人员提出BUG,说我写的那个类支付宝密码框在按下Tab键时候无法像原生的form表单中的input那样被激活,当时的第一反应是,我的密码框原本就是用div模拟的,怎么可能想form表单一样在Tab键时候激活呢。但是当我打开支付宝官网,按下tab键后,密码框可以被激活,这激起了我的好奇心,也就有了后来对tabindex和document.activeElement的发现。废话不多说,进入正题。

HTML tabindex属

tabindex的设置

  当Tab键用于导航时,tabindex属性规定元素的tab键控制次序,其中tabindex的值为阿拉伯数字,默认情况下越靠前的元素该值越小,所以我们可以通过人为改变tabindex的值来改变按下Tab键后可以被激活元素的激活顺序,只需要做如下设置:

1
2
3
4
<input type="text" tabindex="1">
<input type="text" tabindex="2">
<input type="text" tabindex="4">
<input type="text" tabindex="3">

查看全文