网页设计 TabIndex元素_HTML/Xhtml_网页制作

html教程评论363 views阅读模式

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

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="gb2312" /> <title>TabIndex是干什么滴</title> <style type="text/css"> html,body { font:14px/200% Georgia, Verdana, Arial, "宋体"; } </style> </head> <body> <form method="post" action="#"> <p><label for="t1">The first pressing Tab to set focus to textbox </label><input type="text" id="t1" tabindex="1" /></p> <p><label for="t2">The Second pressing Tab to set focus to textbox </label><input type="text" id="t2" tabindex="2" /></p> <p><label for="t3">The Third pressing Tab to set focus to textbox </label><input type="text" id="t3" tabindex="3" /></p> <p>Press Tab, Not focusing to textbox <input type="submit" id="t4" tabindex="-1" value="SendInfo" /></p> </form> </body> </html>

提示:您可以先修改部分代码再运行

复制代码 代码如下:

The first pressing Tab to set focus to textbox

The Second pressing Tab to set focus to textbox

The Third pressing Tab to set focus to textbox

Press Tab, Not focusing to textbox

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

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

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

企鹅博客
  • 本文由 发表于 2019年9月20日 18:21:25
  • 转载请务必保留本文链接:https://www.qieseo.com/355241.html

发表评论