欢迎来到天天文库
浏览记录
ID:31652068
大小:54.22 KB
页数:4页
时间:2019-01-16
《网页设计tabindex元素》由会员上传分享,免费在线阅读,更多相关内容在工程资料-天天文库。
1、网页设计Tabindex元素Tabindex就是按Tab键有顺序的获取定义过的Tabindex元素设置在各个元素之间的焦点。做过表单或者填写过表单的人都会发现,使用Tab键可以逐一获得每个input的焦点。这个东东其实也是可以修改的,比如不想被获取,或者改变被获取的顺序。在填写表单的时候(注册登录或其它),有很多用户都是不通过鼠标,而直接按Tab键跳到下一个文本框的,等到所有的东东都填好,然后是提交,这是一个非常好和方便的功能。我个人的习惯是,在填写完所有的东西时,提交一般都是用鼠标去点击提交按钮的,而且不
2、希望Tab会使焦点跳到button上面,但我很少发现有使用Tab不会跳到button上的,不知道是不是个人习惯太BT了-_-!!!如果不想某个东东被获取焦点,可以tabindex=-x,让tabindex的值为负,这样的话Tab就会直接跳过。下面用一个简单的表单做例:代码如下:It;iDOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.OStrict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtmll-strict.dtd"gt;Itjhtmlxmln
3、s=,,http://www.w3.org/1999/xhtml"gt;It;headgt;11;metahttp-equiv=Z/Content-Type〃content二/ztext/html;charset二gb2312〃/gt;1t;metahttp-equiv二〃Content~Language〃content二〃gb2312,,/gt;It;titlegt;Tabindex是干什么滴It;/titlegt;It:styletype=/ztext/css〃gt;html,body{font:14p
4、x/200%Georgia,Verdana,Arial,〃宋体〃;}1t;/stylegt;lt;/headgt;It;bodygt;It;formmethod=zzpost/zaction二〃#;It;pgt;1t;labelfor=气l〃gt;ThefirstpressingTabtosetfocustotextboxlt;/labelgt;It;inputtype二〃text〃id二〃tl〃tabindex二〃l〃/gt;It;/pgt;1t;pgt;It;labelfor=//t2z/gt:TheS
5、econdpressingTabtosetfocustotextboxIt;/labelgt;lt;inputtype二〃text〃id二〃t2〃tabindex二〃2〃/gt;It;/pgt;It;pgt;It;labelfor=3"gt;TheThirdpressingTabtosetfocustotextboxlt;/labelgt;It;inputtype二〃text〃id二〃t3〃tabindex二〃3〃/gt:It;/pgt;It;pgt;PressTab,Notfocusingtotextbo
6、xIt;inputtype二〃submit〃id二〃t4"tabindex二〃-lz/value=/,Sendlnfoz//gt;It;/pgt;It;/formgt;It:/bodygt;It提示:您可以先修改部分代码再运行代码如下:1t;formmethod二〃post〃action=〃#〃gt;labelfoT二l"gt;ThefirstpressingTabtosetfocustotextboxlt;/labelgt;It;inputtype二〃text〃id二〃tl〃tabindex二〃l〃/gt
7、;It;/pgt;It:labelfor二〃t2〃gt;TheSecondpressingTabtosetfocustotextboxlt;/labelgt;It;inputtype="text"id二〃t2"tabindex二〃2〃/gt;It;/pgt;It;pgt;It;labelfor二〃t3〃gt;TheThirdpressingTabtosetfocustotextboxIt;/labelgt:It;inputtype二〃text〃id二〃t3〃tabindex二〃3〃/gt;It;/pgt;l
8、t;pgt;PressTab,Notfocusingtotextboxlt:inputtype二〃submit〃id二〃t4〃tabindex二〃T"value二〃Sendlnfoz7gt;1t;/pgt;It;/formgt;使用Tab键,获取焦点的顺序就是通过tabindex的值大小来排序的。上面的例子依次获得焦点的是tl,t2,t3,到t4的时候,由于Tablndex的值为T,所以t4不会获得焦点,而是直接
此文档下载收益归作者所有