教程：运用tabIndex实现网页导航

教程：运用tabIndex实现网页导航

提到这个问题,我想很多新手朋友可能没有注意到tabIndex属性,因此如何实现键盘帮助导航tabIndex属性吗?

通过[Tab]键访问元素

HTML DOM tabIndex特性允许你设置或返回一个HTML元素的tab键顺序。IE 4.0最先支持此特性。起初,只有真正可通过[Tab]键访问的元素受到支持,如输入栏、链接等。如今,所有的网络浏览器,以及页面上显示的所有元素都支持此特性。在应用它之前,你可以双击HTML规范保证某个元素支持此特性。tabIndex特性应用tabIndex特性是一个简单而又直接的过程。例如,“国家级期刊”下面的HTML源代码将tabIndex值1赋值给输入栏,它是tab顺序的第一栏:

如果最初选择了[Tab]键,带这个输入栏的网页会将光标移动到firstName栏。在给tabIndex特性赋值时,要留意几个问题。下面是几个赋值规则: 1、带0值tabIndex的元素根据源代码(或默认页面行为)进行排序。 2、大于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]键时,它们即被忽略。 当输入元素充满(达到最大长度)时,你可以增加一小段JavaScript脚本来实现自动定位功能。这是一个基本的函数,我们来看看脚本如何实现其功能:

function www.faqikan.comcheckLen(x,y) {if (y.length==x.maxLength) {var next=x.tabIndexif (next < document.getElementById("frmTest").length) {document.getElementById("frmTest").elements[next-1].focus()} } } 该函数接受两个变量。第一个变量为输入栏,第二个变量包含该栏的值。并将栏的长度与栏的可接受最大长度相比较。如果它们相等(即该栏是充满的),则从(省级期刊)栏中读取tabIndex的值;如果该值小于最大长度,则焦点被移动下一栏中。

这个函数赋值为每个列的onkeyup事件,在酒吧,所以每次输入一个值来测试是否达到最大长度时,调用该函数。如果最大,光标移动到下一栏的选项卡。源列表添加这个函数在上面的例子中。