TabIndex就是按Tab鍵有順序的獲取定義過(guò)的TabIndex元素設(shè)置在各個(gè)元素之間的焦點(diǎn)。
做過(guò)表單或者填寫(xiě)過(guò)表單的人都會(huì)發(fā)現(xiàn)，使用Tab鍵可以逐一獲得每個(gè)input的焦點(diǎn)。這個(gè)東東其實(shí)也是可以修改的，比如不想被獲取，或者改變被獲取的順序。
在填寫(xiě)表單的時(shí)候（注冊(cè)登錄或其它），有很多用戶都是不通過(guò)鼠標(biāo)，而直接按Tab鍵跳到下一個(gè)文本框的，等到所有的東東都填好，然后是提交，這是一個(gè)非常好和方便的功能。我個(gè)人的習(xí)慣是，在填寫(xiě)完所有的東西時(shí)，提交一般都是用鼠標(biāo)去點(diǎn)擊提交按鈕的，而且不希望Tab會(huì)使焦點(diǎn)跳到button上面，但我很少發(fā)現(xiàn)有使用Tab不會(huì)跳到button上的，不知道是不是個(gè)人習(xí)慣太BT了-_-!!!
如果不想某個(gè)東東被獲取焦點(diǎn)，可以tabindex=-x，讓tabindex的值為負(fù)，這樣的話Tab就會(huì)直接跳過(guò)。
下面用一個(gè)簡(jiǎn)單的表單做例：
代碼如下:
<!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>
提示：您可以先修改部分代碼再運(yùn)行
代碼如下:
<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>
使用Tab鍵，獲取焦點(diǎn)的順序就是通過(guò)tabindex的值大小來(lái)排序的。上面的例子依次獲得焦點(diǎn)的是t1, t2, t3, 到t4的時(shí)候，由于TabIndex的值為-1，所以t4不會(huì)獲得焦點(diǎn)，而是直接跳到下一個(gè)獲取焦點(diǎn)的元素上。
t1, t2, t3, t4的TabIndex值可以根據(jù)實(shí)際需求任意更改，Tab焦點(diǎn)根據(jù)值由小到大被獲得。
TabIndex就是用來(lái)做這些滴。