根據這篇文章的介紹，W3C DOM與Netscape僅是把tabIndex添加到有限的幾個元素上：a, area, button, input, object, select, textarea，也就是所謂的表單元素與鏈接。IE4則比它多以下元素： applet, body, div, embed, isindex, marquee, span, table, 與td，到了IE5，幾乎所有能渲染的元素都擁有這屬性（像br元素就是不能渲染的）。tabIndex的值，根據W3C的規定，范圍在0到 32767。
在jQuery的源碼中，講到attr部分提供了一條鏈接，是專門說明如何用javascript設置獲取與移除tabIndex屬性，不過已有些日子了，許多主流瀏覽器都更新了版本。因此我再測試了一次。測試程序見下面的運行框：
| tabindex為1的input元素 | IE6 | IE7 | IE8 | FF3.55 | opeta10.10 | Safari4.0 | chrome4.02 |
|---|---|---|---|---|---|---|---|
| el.tabIndex | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
| el.getAttribute("tabindex") | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
| el.getAttribute("tabIndex") | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
此表格與《Getting, setting, and removing tabindex values with JavaScript》一文中對應的表格相比，全部為1。
我們再來看當表單元素沒有顯示地設置tabIndex屬性時，tabIndex是否存在，存在的話其默認值是多少。
| 沒有tabIndex的input元素 | IE6 | IE7 | IE8 | FF3.55 | opeta10.10 | Safari4.0 | chrome4.02 |
|---|---|---|---|---|---|---|---|
| el.tabIndex | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
| el.getAttribute("tabindex") | 0 | 0 | 0 | null | null | null | null |
| el.getAttribute("tabIndex") | 0 | 0 | 0 | null | null | null | null |
如果測試對象為一個沒有顯式設置tabIndex屬性的div元素呢？在W3C標準中，只有表單元素與鏈接才能tabIndex屬性。
| 沒有tabIndex的div元素 | IE6 | IE7 | IE8 | FF3.55 | opeta10.10 | Safari4.0 | chrome4.02 |
|---|---|---|---|---|---|---|---|
| el.tabIndex | 0 | 0 | 0 | -1 | -1 | -1 | -1 |
| el.getAttribute("tabindex") | 0 | 0 | 0 | null | null | null | null |
| el.getAttribute("tabIndex") | 0 | 0 | 0 | null | null | null | null |
我們看這篇文章，標準瀏覽器的設定其涇渭分明，-1給那些不該擁有它的元素，0是默認分配給那些表單元素與鏈接，如果用戶定義了就返回用戶的認定值，即便它是div。
不過在IE中，非表單元素與鏈接無論tabIndex是否定義都返回0，那么我們怎么知道元素是否已定義過呢？《Getting, setting,……》給出一個非常好的辦法。利用getAttributeNode 獲取對應的屬性節點。在IE中，如果是默認屬性或已定義屬性，將會返回一個對象，標準瀏覽器則只有當我們顯示地設置這屬性時才返回對象，其他一律為null。在IE中，如果是默認屬性，沒有為其賦值，它有一個特殊的specified ，顯示為false，如果賦值了，則為true。標準瀏覽器沒有這東西，也不需要此東西。
再看為沒有tabIndex屬性元素賦值的情況el.tabIndex=value就不用說了，肯定行得通，dom 0年代的實現。如果一個元素用setAttribute("tabIndex",3)賦值，注意是大寫，那么無論是el.tabIndex還是el.getAttribute("tabIndex")還是el.getAttribute("tabindex")都能得到3。如果是setAttribute("tabindex",3)賦值,IE則全為0，標準瀏覽器則全為3，因此還是用前者吧。
| 沒有tabIndex的input元素 | IE6 | IE7 | IE8 | FF3.55 | opeta10.10 | Safari4.0 | chrome4.02 |
|---|---|---|---|---|---|---|---|
| el.tabIndex=3 | 3 | 3 | 3 | 3 | 3 | 3 | 3 |
| el.setAttribute("tabIndex",3) | 3 | 3 | 3 | 3 | 3 | 3 | 3 |
| el.setAttribute("tabindex",3) | 0 | 0 | 0 | 3 | 3 | 3 | 3 |
最后移除屬性的情況，移除結果后分別用el.tabIndex,el.getAttribute("tabIndex"),el.getAttribute("tabindex")測試。誰都沒有把握移除干凈，從目前的情況來看，只有選擇el.removeAttribute
| tabIndex為3的input元素 | IE6 | IE7 | IE8 | FF3.55 | opeta10.10 | Safari4.0 | chrome4.02 |
|---|---|---|---|---|---|---|---|
| el.removeAttribute | 0,0,0 | 0,0,0 | 0,0,0 | 0,null,null | 0,null,null | 3,null,null | 3,null,null |
| el.removeAttribute | 3,3,3 | 3,3,3 | 3,3,3 | 0,null,null | 0,null,null | 3,null,null | 3,null,null |
| delete el.tabIndex | errer | errer | errer | 3,3,3 | 0,null,null | 3,3,3 | undefined,null,null |
新聞熱點
疑難解答
