javascript tabIndex属性
人气:0下面的例子,为了突现tabIndex控制焦点跳转的能力,特意把顺序打乱了。请先选中第一个文本域,然后按tab键观察。
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
根据这篇文章的介绍,W3C DOM与Netscape仅是把tabIndex添加到有限的几个元素上:a, area, button, input, object, select, textarea,也就是所谓的表单元素与链接。IE4则比它多以下元素: applet, body, div, embed, isindex, marquee, span, table, 与td,到了IE5,几乎所有能渲染的元素都拥有这属性(像br元素就是不能渲染的)。tabIndex的值,根据W3C的规定,范围在0到 32767。
在jQuery的源码中,讲到attr部分提供了一条链接,是专门说明如何用javascript设置获取与移除tabIndex属性,不过已有些日子了,许多主流浏览器都更新了版本。因此我再测试了一次。测试程序见下面的运行框:
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
tabindex为1的input元素 | IE6 | IE7 | IE8 | FF3.55 | opeta10.10 | Safari4.0 | chrome4.02 |
---|---|---|---|---|---|---|---|
el.tabIndex | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
el.getAttribute("tabindex") | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
el.getAttribute("tabIndex") | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
此表格与《Getting, setting, and removing tabindex values with JavaScript》一文中对应的表格相比,全部为1。
我们再来看当表单元素没有显示地设置tabIndex属性时,tabIndex是否存在,存在的话其默认值是多少。
没有tabIndex的input元素 | IE6 | IE7 | IE8 | FF3.55 | opeta10.10 | Safari4.0 | chrome4.02 |
---|---|---|---|---|---|---|---|
el.tabIndex | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
el.getAttribute("tabindex") | 0 | 0 | 0 | null | null | null | null |
el.getAttribute("tabIndex") | 0 | 0 | 0 | null | null | null | null |
如果测试对象为一个没有显式设置tabIndex属性的div元素呢?在W3C标准中,只有表单元素与链接才能tabIndex属性。
没有tabIndex的div元素 | IE6 | IE7 | IE8 | FF3.55 | opeta10.10 | Safari4.0 | chrome4.02 |
---|---|---|---|---|---|---|---|
el.tabIndex | 0 | 0 | 0 | -1 | -1 | -1 | -1 |
el.getAttribute("tabindex") | 0 | 0 | 0 | null | null | null | null |
el.getAttribute("tabIndex") | 0 | 0 | 0 | null | null | null | null |
我们看这篇文章,标准浏览器的设定其泾渭分明,-1给那些不该拥有它的元素,0是默认分配给那些表单元素与链接,如果用户定义了就返回用户的认定值,即便它是div。
不过在IE中,非表单元素与链接无论tabIndex是否定义都返回0,那么我们怎么知道元素是否已定义过呢?《Getting, setting,……》给出一个非常好的办法。利用getAttributeNode 获取对应的属性节点。在IE中,如果是默认属性或已定义属性,将会返回一个对象,标准浏览器则只有当我们显示地设置这属性时才返回对象,其他一律为null。在IE中,如果是默认属性,没有为其赋值,它有一个特殊的specified ,显示为false,如果赋值了,则为true。标准浏览器没有这东西,也不需要此东西。
再看为没有tabIndex属性元素赋值的情况el.tabIndex=value就不用说了,肯定行得通,dom 0年代的实现。如果一个元素用setAttribute("tabIndex",3)赋值,注意是大写,那么无论是el.tabIndex还是el.getAttribute("tabIndex")还是el.getAttribute("tabindex")都能得到3。如果是setAttribute("tabindex",3)赋值,IE则全为0,标准浏览器则全为3,因此还是用前者吧。
没有tabIndex的input元素 | IE6 | IE7 | IE8 | FF3.55 | opeta10.10 | Safari4.0 | chrome4.02 |
---|---|---|---|---|---|---|---|
el.tabIndex=3 | 3 | 3 | 3 | 3 | 3 | 3 | 3 |
el.setAttribute("tabIndex",3) | 3 | 3 | 3 | 3 | 3 | 3 | 3 |
el.setAttribute("tabindex",3) | 0 | 0 | 0 | 3 | 3 | 3 | 3 |
最后移除属性的情况,移除结果后分别用el.tabIndex,el.getAttribute("tabIndex"),el.getAttribute("tabindex")测试。谁都没有把握移除干净,从目前的情况来看,只有选择el.removeAttribute
tabIndex为3的input元素 | IE6 | IE7 | IE8 | FF3.55 | opeta10.10 | Safari4.0 | chrome4.02 |
---|---|---|---|---|---|---|---|
el.removeAttribute |
0,0,0 | 0,0,0 | 0,0,0 | 0,null,null | 0,null,null | 3,null,null | 3,null,null |
el.removeAttribute |
3,3,3 | 3,3,3 | 3,3,3 | 0,null,null | 0,null,null | 3,null,null | 3,null,null |
delete el.tabIndex | errer | errer | errer | 3,3,3 | 0,null,null | 3,3,3 | undefined,null,null |
加载全部内容