HTML TabIndex屬性


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;

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM