JavaScript tabIndex 属性详解：跨浏览器兼容性与操作指南

tabIndex 属性概述

tabIndex属性的核心作用在于控制页面中表单元素和链接通过Tab键遍历的顺序，其优先级由tabIndex的数值大小决定。尽管这一功能看似基础，但它体现了Web应用对无障碍访问（Accessibility）的重视，确保用户在缺乏鼠标设备（如使用WAP终端）时仍能顺畅操作。

为了直观展示tabIndex对焦点跳转顺序的控制能力，示例中故意打乱了元素的排列顺序。用户可以先选中第一个文本域，随后按Tab键观察焦点的跳转路径。

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="gb2312"/> <meta http-equiv="X-UA-Compatible" content="IE=7"> <title>tabIndex By 司徒正美</title>  </head> <body>  </body> </html> 

标准与IE对tabIndex的支持范围

据相关文档记载，W3C DOM与Netscape标准仅允许在少数特定元素上应用tabIndex属性，包括a、area、button、input、object、select和textarea，即通常所说的表单元素与链接。IE4在此基础上扩展了applet、body、div、embed、isindex、marquee、span、table和td等元素的支持；而到了IE5，几乎所有可渲染元素均支持该属性（不可渲染元素如br除外）。根据W3C规范，tabIndex的取值范围限定在0至32767之间。

跨浏览器兼容性测试

jQuery源码中的attr部分曾引用一篇关于如何使用JavaScript设置、获取及移除tabIndex属性的文章，但该文发布已久，主流浏览器版本已多次更新。因此，此处重新进行了测试，测试程序见下方运行框。

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>tabIndex By 司徒正美</title>  </head> <body> <input tabindex="1" value="test" type="text" id="test"> </body> </html> 

此测试表格与《Getting, setting, and removing tabindex values with JavaScript》一文中的对应表格相比，所有结果均为1。

未设置tabIndex时的默认行为

接下来探讨当表单元素未显式设置tabIndex属性时，该属性是否存在以及其默认值是多少。

若测试对象为未显式设置tabIndex属性的div元素，根据W3C标准，只有表单元素与链接才具备tabIndex属性。

参考相关文献，标准浏览器对此处理界限分明：将-1分配给不应拥有该属性的元素，0则作为默认值分配给表单元素与链接；若用户自定义了值，则返回用户设定的值，即使该元素是div。

判断元素是否定义tabIndex的方法

然而在IE浏览器中，无论是否定义tabIndex，非表单元素与链接均返回0。那么如何判断元素是否已定义过该属性呢？《Getting, setting,……》提供了解决方案：利用getAttributeNode获取对应的属性节点。在IE中，无论是默认属性还是已定义属性，都会返回一个对象；而在标准浏览器中，仅当显式设置该属性时才返回对象，否则返回null。在IE中，若为默认属性且未赋值，其special属性specified显示为false；若已赋值，则为true。标准浏览器无此特性，亦无需此特性。

设置tabIndex的大小写敏感性

再看为没有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属性的最佳实践

最后讨论移除属性的情况，移除后分别使用el.tabIndex、el.getAttribute("tabIndex")和el.getAttribute("tabindex")进行测试。目前看来，没有任何一种方法能彻底干净地移除属性，从现有情况看，仅选择el.removeAttribute("tabIndex")较为可靠。