最近，当我在一个网站上输入表格数据时，我填写了一栏，并点击[Tab]键移到下一栏；当我抬头时，我惊异的发现光标跳到页面下方的另一栏中。我用鼠标将光标移到正确的文本栏中，但不久[Tab]键又再次出现问题。这一情形使我想了解一下页面设计，以及tabIndex属性如何通过键盘帮助导航。
通过[Tab]键访问元素
HTML DOM tabIndex特性答应你设置或返回一个HTML元素的tab键顺序。IE 4.0最先支持此特性。起初，只有真正可通过[Tab]键访问的元素受到支持，如输入栏、链接等。如今，所有的网络浏览器，以及页面上显示的所有元素都支持此特性。在应用它之前，你可以双击HTML规范保证某个元素支持此特性。
tabIndex特性
应用tabIndex特性是一个简单而又直接的过程。例如，下面的HTML源代码将tabIndex值1赋值给输入栏，它是tab顺序的第一栏：
<input id="idfname" name="firstName" tabindex="1" />
假如最初选择了[Tab]键，带这个输入栏的网页会将光标移动到 firstName栏。
在给tabIndex特性赋值时，要留意几个问题。下面是几个赋值规则：
列表A中的样本HTML代码将一个tabIndex值赋予给页面中的每一个项目。输入栏与DIV标签包含tabIndex特性，答应用户用键盘仔细阅读页面元素。（DIV标签并不提供与获得焦点有关的太多信息，但我想用非输入元素说明tabIndex的应用情况。）值为-1的按钮被赋值，在应用[Tab]键时，它们即被忽略。
列表A
<html><head>
<title>tabIndex Example</title>
</head>
<body>
<form name="frmTest">
<hr size="3" />
<div id="nameSection" tabindex="1" style="background:silver; padding: 15px;">
First: <input id="idfname" name="firstName" tabindex="2" /><br />
Middle: <input id="idmname" name="middleName" tabindex="3" /><br />
Last: <input id="idlname" name="lastName" tabindex="4" /><br />
</div>
<hr size="3" />
<div id="addressSection" tabindex="5" style="background:gold; padding: 15px;">
Address: <input id="idaddress" name="address" tabindex="6" /><br />
City: <input id="idcity" name="city" tabindex="7" /><br />
State: <input id="idlstate" name="state" tabindex="8" /><br />
Country: <input id="idcountry" name="country" tabindex="9" /><br />
评论加载中…
 |