tabindex
報告反饋
試一試
tabindex 全域性屬性 允許開發者使 HTML 元素可聚焦,允許或阻止它們按順序可聚焦(通常使用 Tab 鍵,因此得名),並確定它們按順序聚焦導航的相對順序。
它接受一個整數作為值,根據整數的值產生不同的結果。
- 負值(確切的負值實際上並不重要,通常是
tabindex="-1")表示該元素無法透過順序鍵盤導航訪問。注意:
tabindex="-1"可能對那些不應使用 Tab 鍵直接導航,但需要將鍵盤焦點設定為它們的元素有用。例如,一個螢幕外模態視窗,當它進入檢視時應該被聚焦,或者一個當錯誤的表單提交時應該立即被聚焦的表單提交錯誤訊息。 tabindex="0"表示該元素在順序鍵盤導航中應該是可聚焦的,在任何正的tabindex值之後。這些元素的焦點導航順序由它們在文件源中的順序定義。- 正值 表示該元素應該在順序鍵盤導航中是可聚焦的,其順序由數字的值定義。也就是說,
tabindex="4"在tabindex="5"和tabindex="0"之前聚焦,但在tabindex="3"之後聚焦。如果多個元素共享相同的正tabindex值,它們彼此之間的順序遵循它們在文件源中的位置。tabindex的最大值為 32767。 - 如果
tabindex屬性包含,但沒有設定值,那麼元素是否可聚焦由使用者代理決定。警告:建議您僅使用
0和-1作為tabindex值。避免使用大於0的tabindex值和可以更改可聚焦 HTML 元素順序的 CSS 屬性(Ordering flex items)。這樣做會使依賴鍵盤導航或輔助技術的使用者難以導航和操作頁面內容。相反,請按照邏輯順序編寫文件中的元素。
一些可聚焦的 HTML 元素預設情況下具有 0 的 tabindex 值,由 使用者代理 在後臺設定。這些元素是具有 href 屬性的 <a> 或 <area>,<button>,<frame> 已棄用 ,<iframe>,<input>,<object>,<select>,<textarea>,以及 SVG <a> 元素,或者為 <details> 元素提供摘要的 <summary> 元素。開發人員不應該在這些元素中新增 tabindex 屬性,除非它改變了預設行為(例如,包括一個負值將從焦點導航順序中刪除該元素)。
警告:tabindex 屬性不能用於 <dialog> 元素。
無障礙問題
規範
| 規範 |
|---|
| HTML 標準 # attr-tabindex |
瀏覽器相容性
BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。
另請參閱
- 所有 全域性屬性
HTMLElement.tabIndex反映此屬性tabindex的輔助功能問題:請參閱 Adrian Roselli 的 Don't Use Tabindex Greater than 0