视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
html教程:用tabIndex轻松实现网页导航
2020-11-27 15:37:01 责编:小采
文档

最近,当我在一个网站上输入表格数据时,我填写了一栏,并点击[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]键时,它们即被忽略。

  当输入元素充满(达到最大长度)时,你可以增加一小段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的值;如果该值小于最大长度,则焦点被移动下一栏中。

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

  提高访问能力

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

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

下载本文
显示全文
专题