html教程:用tabIndex轻松实现网页导航

2016-02-19 20:06 13 1 收藏

下面请跟着图老师小编一起来了解下html教程:用tabIndex轻松实现网页导航,精心挑选的内容希望大家喜欢,不要忘记点个赞哦!

【 tulaoshi.com - Web开发 】

  最近,当我在一个网站上输入表格数据时,我填写了一栏,并点击[Tab]键移到下一栏;当我抬头时,我惊奇的发现光标跳到页面下方的另一栏中。我用鼠标将光标移到正确的文本栏中,但不久[Tab]键又再次出现问题。这一情形使我想了解一下页面设计,以及tabIndex属性如何通过键盘帮助导航。

  通过[Tab]键访问元素

  HTML DOM tabIndex特性允许你设置或返回一个HTML元素的tab键顺序。IE 4.0最先支持此特性。起初,只有真正可通过[Tab]键访问的元素受到支持,如输入栏、链接等。如今,所有的网络浏览器,以及页面上显示的所有元素都支持此特性。在应用它之前,你可以双击HTML规范保证某个元素支持此特性。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  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中的源代码将此函数添加到上面的例子中。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  提高访问能力

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

  小事一桩

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

来源:http://www.tulaoshi.com/n/20160219/1622746.html

延伸阅读
标签: PHP
    by coldwind/iwind/month/ccterran http://iwind.org    有很长一段时间我到处问别人怎么实现静态网页,还向唠叨提过问题,而如今,我终于想出了一个很简单的办法,那就是用libtemplate来实现它。   大家看:http://doc.iwind.org   下面我就如何实现静态网页输出谈一谈。   ...
标签: PHP
  怎样用PHP来给网页做导航栏 原作:Brad Bulger   译文:李平 译者注:本文原名《Site Navigation with PHP》,原文详述了如何用PHP编程来做出效果理想的网页导航条,本文只选译了其中的部分文章,所选取的部分是文章精髓之所在,只要大家能弄懂这部分内容就可以用同样的原理、思想做出我们需要的效果来,希望给读者能起到抛...
标签: Web开发
传统的网页BBS大多是采用CGI模式实现的,它的实现要求编程者既要掌握编程语言如Perl或C等,又要了解关于CGI模式的各项技术内容,因此要制作自己的网页BBS确实困难不小。ASP(Active Server Pages 动态服务器主页)的出现,使我们眼前一亮,能不能利用ASP实现网页BBS呢?回答当然是肯定的。ASP的诱人之处就在于它提供了一种简单易学的脚本,并带...
标签: Web开发
主要函数: 代码如下: !-- function getObject(objectId) {      if(document.getElementById && document.getElementById(objectId)) {     // W3C DOM        return document.getElementById(objectId); ...
标签: Java JAVA基础
  现在JSP被越来越多的人应用在后台程序的开发及动态网页的制作上了,今天就来介绍一下如何用JSP来实现文件的上载。 一、RFC1867规范 在过去的Html中,表单不能实现文件的上传,这多少限制了一些网页的功能。RFC1867规范(即Html中实现基于表单的文件上传)对表单作出了扩展,增加了一个表单元素...

经验教程

465

收藏

66
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部