TabIndex是干什么滴

原创 2007年09月29日 09:32:00

TabIndex就是按Tab键有顺序的获取定义过的TabIndex元素设置在各个元素之间的焦点。

做过表单或者填写过表单的人都会发现,使用Tab键可以逐一获得每个input的焦点。这个东东其实也是可以修改的,比如不想被获取,或者改变被获取的顺序。

在填写表单的时候(注册登录或其它),有很多用户都是不通过鼠标,而直接按Tab键跳到下一个文本框的,等到所有的东东都填好,然后是提交,这是一个非常好和方便的功能。我个人的习惯是,在填写完所有的东西时,提交一般都是用鼠标去点击提交按钮的,而且不希望Tab会使焦点跳到button上面,但我很少发现有使用Tab不会跳到button上的,不知道是不是个人习惯太BT了-_-!!!

如果不想某个东东被获取焦点,可以tabindex=-x,让tabindex的值为负,这样的话Tab就会直接跳过。

演示地址:http://www.doyoe.com/model/dhtml/example/tabindex.htm

下面用一个简单的表单做例:

<form name="testform" method="post" action="">
 <input type="text" name="t1" tabindex="1" />
 <input type="text" name="t2" tabindex="2" />
 <input type="text" name="t3" tabindex="3" />
 <input type="submit" name="t4" value="SendInfo" tabindex="-1" />
</form>

使用Tab键,获取焦点的顺序就是通过tabindex的值大小来排序的。上面的例子依次获得焦点的是t1, t2, t3, 到t4的时候,由于TabIndex的值为-1,所以t4不会获得焦点,而是直接跳到下一个获取焦点的元素上。

t1, t2, t3, t4的TabIndex值可以根据实际需求任意更改,Tab焦点根据值由小到大被获得。

TabIndex就是用来做这些滴。。。

 

tabIndex 和 aria注意点

转载自http://www.cnblogs.com/yilian/archive/2011/05/23/aria.html (1)tabIndex:   当使用键盘时,tabindex是个...

js模拟Ctrl+C复制、Ctrl+V粘贴功能之tabindex、focus、keyCode

话不多说,今天遇到了一个大坑,是这样的,一颗DOM树中有一个节点,要对其实现Ctrl+C复制、Ctrl+V粘贴功能。起初拿到这个任务,我首先想到的是选中它,然后按下Ctrl、C实现复制,再按下Ctrl...

tabindex的使用

tabIndex 的用处很简单,就是利用tab键遍历页面的表单元素和链接,按照tabindex的大小决定顺序。虽然微不足道,但细节处见真功夫,这是任何一个WEB应用应当具备的亲用力,保证用户在没有鼠标...

div标签别样的属性——tabindex

今天做开发遇到一个问题,经过努力还是解决了,这次然我认识了div中一个新的属性tabindex,下面结合例子谈一下该属性的作用:...

HTML tabindex属性与web网页键盘无障碍访问

转摘自:http://www.zhangxinxu.com/wordpress/2017/05/html-tabindex/ HTML虽然入门简单,但是,要想日后深入,却要花费非常大量的时间,因...

软件测试工程师具体是干什么?

  • 2010年04月12日 17:03
  • 29KB
  • 下载

在 ACM-ICPC 中获得很好成绩的人,现在都在干什么?

程序猴子,一本正经的民间理论计算机科学家 列举几个人,想起来再补充 再加几个 Adam D’Angelo ,2004年WF银牌,加州理工4.0的绩点毕业,曾经担任facebo...

用tabIndex轻松实现网页导航

  • 2008年01月25日 09:46
  • 33KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:TabIndex是干什么滴
举报原因:
原因补充:

(最多只允许输入30个字)