網頁設計TabIndex元素

作者：Eve Cole 更新時間：2025-05-06 10:00:04

TabIndex就是按Tab鍵有順序的獲取定義過的TabIndex元素設置在各個元素之間的焦點。

做過表單或者填寫過表單的人都會發現，使用Tab鍵可以逐一獲得每個input的焦點。這個東東其實也是可以修改的，比如不想被獲取，或者改變被獲取的順序。

在填寫表單的時候（註冊登錄或其它），有很多用戶都是不通過鼠標，而直接按Tab鍵跳到下一個文本框的，等到所有的東東都填好，然後是提交，這是一個非常好和方便的功能。我個人的習慣是，在填寫完所有的東西時，提交一般都是用鼠標去點擊提交按鈕的，而且不希望Tab會使焦點跳到button上面，但我很少發現有使用Tab不會跳到button上的，不知道是不是個人習慣太BT了-_-!!!

如果不想某個東東被獲取焦點，可以tabindex=-x，讓tabindex的值為負，這樣的話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>

複製代碼