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