用tabIndex轻松实现网页导航

tzlink · 发表于 2007-10-4 11:06:56

最近，当我在一个网站上输入表格数据时，我填写了一栏，并点击[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特性赋值时，要留意几个问题。下面是几个赋值规则：

带0值tabIndex的元素根据源代码（或默认页面行为）进行排序。
大于0的tabIndex值设定其tab顺序。所有带正tabIndex值的元素出现在所有带0 tabIndex值的元素之前。
如果你犯了一个错误，把同一个tabIndex赋予给多个元素，像其它元素一样，它们会以一个0值tabIndex进行处理。
将tabIndex赋值为-1，则在使用[Tab]键时，此元素被忽略。注意：如果使用-1值时，onfocus与onblur事件仍被启动。
tabIndex的值可为0至32767之间的任意数字。
列表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 />
</div>
<hr size="3" />
<div id="addressSection" tabindex=10 style="background:lightblue; padding: 15px;">
Home: <input id="idhome" name="homenumber" tabindex="11" /><br />
Work: <input id="idwork" name="worknumber" tabindex="12" /><br />
Mobile: <input id="idlcell" name="cellnumber" tabindex="13" /><br />
</div>
<hr size="3" />
<div id="buttonsSection" tabindex=14 style="background:green; padding: 15px;">
<input type="button" name="sButton" tabindex="-1" id="idSButton" value="Submit" />
<input type="button" name="cButton" tabindex="-1" id="idCButton" value="Cancel" />
</div></form></body></html>当输入元素充满（达到最大长度）时，你可以增加一小段JavaScript脚本来实现自动定位功能。这是一个基本的函数，我们来看看脚本如何实现其功能：

function checkLen(x,y) {

if (y.length==x.maxLength) {

var next=x.tabIndex

if (next < document.getElementById("frmTest").length) {

document.getElementById("frmTest").elements[next-1].focus()

} } }

该函数接受两个变量。第一个变量为输入栏，第二个变量包含该栏的值。并将栏的长度与栏的可接受最大长度相比较。如果它们相等（即该栏是充满的），则从栏中读取tabIndex的值；如果该值小于最大长度，则焦点被移动下一栏中。

tzlink · 发表于 2007-10-4 11:07:26

此函数为每一栏的onkeyup事件赋值，因此每次在栏中输入一个值，以检验其是否达到最大长度时，都要调用该函数。如果达到最大值，则光标按tab顺序移动到下一栏中。列表B中的源代码将此函数添加到上面的例子中。

列表B

<html><head>
<title>tabIndex Example 2</title>
<script type="text/javascript">
function checkLen(x,y) {
if (y.length==x.maxLength) {
var next=x.tabIndex
if (next<document.getElementById("frmTest").length) {
document.getElementById("frmTest").elements[next-1].focus();
} } }
</script></head>
<body>
<form name="frmTest">
<hr size="3" />
<div id="nameSection" tabIndex="1" style="background:silver; padding: 15px;">
First: <input id="idfname" size="50" name="firstName" tabIndex="2" maxlength="50" onkeyup="checkLen(this,this.value)" /><br />
Middle: <input id="idmname" size="50" name="middleName" tabIndex="3" maxlength="50" onkeyup="checkLen(this,this.value)" /><br />
Last: <input id="idlname" size="50" name="lastName" tabIndex="4" maxlength="50" onkeyup="checkLen(this,this.value)" /><br />
</div>
<hr size="3" />
<div id="addressSection" tabIndex="5" style="background:gold; padding: 15px;">
Address: <input id="idaddress" size="50" name="address" tabIndex="6" maxlength="50" onkeyup="checkLen(this,this.value)" /><br />
City: <input id="idcity" size="50" name="city" tabIndex="7" maxlength="50" onkeyup="checkLen(this,this.value)" /><br />
State: <input id="idlstate" size="50" name="state" tabIndex="8" maxlength="50" onkeyup="checkLen(this,this.value)" /><br />
Country: <input id="idcountry" size="50" name="country" tabIndex="9" maxlength="50" onkeyup="checkLen(this,this.value)" /><br />
</div>
<hr size="3" />
<div id="addressSection" tabindex=10 style="background:lightblue; padding: 15px;">
Home: <input id="idhome" size="50" name="homenumber" tabIndex="11" maxlength="16" onkeyup="checkLen(this,this.value)" /><br />
Work: <input id="idwork" size="50" name="worknumber" tabIndex="12" maxlength="16"
onkeyup="checkLen(this,this.value)" /><br />
Mobile: <input id="idlcell" size="50" name="cellnumber" tabIndex="13" maxlength="16" onkeyup="checkLen(this,this.value)" /><br />
</div>
<hr size="3" />
<div id="buttonsSection" tabindex=14 style="background:green;">
<input type="button" name="submitButton" tabIndex="-1" id="idSubmitButton" value="Submit" onfocus="document.write('submit form');" />
<input type="button" name="cancelButton" tabIndex="-1" id="idCancelButton" value="Cancel" />
</div></form></body></html>提高访问能力

为元素指定tabIndex可帮助经常使用键盘的用户更为方便地接触网络界面；非标准用户，如PDA、移动电话以及残疾人使用的屏幕阅读器也从中受益。任何扩充应用软件功能的事件都是有益的。

小事一桩

你可能要花许多时间来设计网络窗体，使其具有视觉吸引力，并能被后端服务器组件正确处理。但是，你可能忽略了要用非标准技术或浏览器对其进行测试。典型的例子就是放弃鼠标，而依靠键盘来导航窗体。HTML标准包含tabIndex特性，它允许你控制通过[Tab]键访问的项目。

		自动登录	找回密码
密码			注册

全国各地医院查询	重量转换换算	RGB颜色查询	交通标志大全	各类快递查询
简体繁体转换	黄金价格实时走势	万年历查询	实时汇率转换	列车时刻查询
在线翻译工具	CSS中文手册	HTML学习教程	MySQL中文手册	JavaScript中文手册
PHP安全基础手册	PHP5面向对象编程教程	正则表达式系统教程	SQL Server精华	Apache 2.2 中文手册
DOS命令全集指南	windows脚本技术中文版	股票行情查询	历史上的今天	邮编区号查询
长度转换换算	货币汇率转换	常用电话号码	体育彩票查询	手机位置查询
域名Whois信息查询	谷歌PR值查询	台州网站建设	台州网站开发	台州域名注册
天气预报查询	长度转换换算器	在线电子地图	车牌号码查询	中国百家姓查询

用tabIndex轻松实现网页导航

相关帖子