TabIndex作用:
tabindex:全局屬性。指示其元素是否可以聚焦(獲得焦點),以及它是否/在何處參與順序鍵盤導航(因通常使用tab鍵操作,顧因此得名)。
當使用tab鍵在網頁控件中進行導航時,將首先移動到具有最小tabindex屬性值的控件上,最后在具有最大tabindex屬性值的控件上結束。
TabIndex的用法:
1 <a href="//www.baidu.com" tabindex="2">百度</a> 2 <a href="//www.sina.com" tabindex = "1">新浪</a>
HTML 4.0.1與HTML5之間的差異:
在HTML5中,tabindex屬性可用於任何的HTML元素(它會驗證任何HTML元素。但不一定是有用)。
在HTML 4.0.1中,tabindex屬性可用於:<a>,<area>,<button>,<input>,<object>,<select>和<textarea>。
瀏覽器兼容性:
TabIndex的方法:
tabindex接受一個整數作為值,根據值得不同,具有不同的結果:
-
- tabindex=負值(通常是tabindex="-1"),表示元素是可聚焦的,但是不能通過鍵盤進行導航來訪問到該元素。在使用tab鍵時,此元素被忽略。用JS做頁面小組件內部鍵盤導航的時候非常有用,注意:如果使用-1值時,onfocus與onblur事件仍能啟動。
- tabindex="0"(默認),表示元素是可聚焦的,並且可以通過鍵盤導航來聚焦到該元素,它的相對順序是當前處於的DOM結構來決定的,即使采用了浮動改變了頁面中顯示的順序,依然是按照HTML文檔中的順序來定位。
- tabindex=正值(32767是臨界點,具體請參考注意事項),表示元素是可聚焦的,並且可以通過鍵盤導航來訪問到該元素;它的相對順序按照tabindex的數值遞增而滯后獲取焦點。如果多個元素擁有相同的tabindex,它們的相對順序按照它們在當前DOM中的先后順序決定。
根據鍵盤序列導航的順序,值為0、非法值、或者沒有tabindex值的元素應該放置在tabindex值為正值的元素后面。
如果我們在<div>上設置了tabindex屬性,它的子元素內容不能使用箭頭鍵來滾動,除非我們在內容上也設置tabindex。
注意事項:tabindex的最大值不應超過32767。在IE中,tabindex范圍從1~32767之間(包括32767),在Firefox、Chrome無限制,不過一旦超出32767時,順序跟tabindex=0時一樣。如果沒有指定,它的默認值為-1;