資源描述:
《網(wǎng)頁設(shè)計(jì)tabindex元素》由會(huì)員上傳分享,免費(fèi)在線閱讀,更多相關(guān)內(nèi)容在工程資料-天天文庫。
1、網(wǎng)頁設(shè)計(jì)Tabindex元素Tabindex就是按Tab鍵有順序的獲取定義過的Tabindex元素設(shè)置在各個(gè)元素之間的焦點(diǎn)。做過表單或者填寫過表單的人都會(huì)發(fā)現(xiàn),使用Tab鍵可以逐一獲得每個(gè)input的焦點(diǎn)。這個(gè)東東其實(shí)也是可以修改的,比如不想被獲取,或者改變被獲取的順序。在填寫表單的時(shí)候(注冊(cè)登錄或其它),有很多用戶都是不通過鼠標(biāo),而直接按Tab鍵跳到下一個(gè)文本框的,等到所有的東東都填好,然后是提交,這是一個(gè)非常好和方便的功能。我個(gè)人的習(xí)慣是,在填寫完所有的東西時(shí),提交一般都是用鼠標(biāo)去點(diǎn)擊提交按鈕的,而且不
2、希望Tab會(huì)使焦點(diǎn)跳到button上面,但我很少發(fā)現(xiàn)有使用Tab不會(huì)跳到button上的,不知道是不是個(gè)人習(xí)慣太BT了-_-!!!如果不想某個(gè)東東被獲取焦點(diǎn),可以tabindex=-x,讓tabindex的值為負(fù),這樣的話Tab就會(huì)直接跳過。下面用一個(gè)簡(jiǎn)單的表單做例:代碼如下: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提示:您可以先修改部分代碼再運(yùn)行代碼如下: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鍵,獲取焦點(diǎn)的順序就是通過tabindex的值大小來排序的。上面的例子依次獲得焦點(diǎn)的是tl,t2,t3,到t4的時(shí)候,由于Tablndex的值為T,所以t4不會(huì)獲得焦點(diǎn),而是直接