TabIndex是幹什麼滴

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就是用來做這些滴。。。

 
發佈了47 篇原創文章 · 獲贊 0 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章