冷門的HTML - tabindex 的做用

冷門的HTML - tabindex 的做用

HTML 的 tabindex 屬性開發過程當中通常不會使用到，最近開發中有個需求兼顧富交互，便總結了一下。本篇文章同時收錄在個人【前端知識點】中，Github連接直達，歡迎 Star

按照慣例，放上官方定義

兼容性：Safari不支持！

閱讀本文您將收穫

• tabindex的做用
• tabindex的使用
• 如何利用 tabindex 創造更好的用戶體驗

前言

• 在咱們平常使用網頁的過程當中，能夠經過鍵盤控制一些元素的聚焦，從而達到便捷訪問的目的

• element 分爲 focusable 和 非focusable ,若是使用了tabindex就能夠改變相關的行爲

• 在HTML中有6個元素默認支持聚焦：

  • 帶 href 屬性的 <a> 標籤
  • 帶 href 屬性的 <link> 標籤
  • <button></button> 標籤
  • <input /> 標籤 (排除帶有 type="hidden" 屬性的)
  • <select></select> 標籤
  • <textarea></textarea> 標籤

• 以上的元素默認均可以使用 Tab 鍵，以及 JS focus() 方法聚焦

document.querySelector("a").focus();

• 使用 tab鍵 進行聚焦元素時，聚焦的順序等於元素在代碼中的出現前後順序，當咱們進行富交互優化時，就須要用到 tabindex 這個屬性來幫助咱們進行更好用戶體驗的優化了

tabindex的做用

• ①元素是否能聚焦：經過鍵盤這類輸入設備，或者經過 JS focus() 方法

• ②元素何時能聚焦：在用戶經過鍵盤與頁面交互時

• 通俗來講：就是當用戶使用鍵盤時，tabindex用來定位html元素,即便用tab鍵時焦點的順序。

tabindex的範圍

tabindex理論上能夠使用在幾乎全部元素上

• tabindex 理論上能夠用在幾乎全部元素上，無論這個元素默認是當否支持聚焦

tabindex 有三個值：0，-N(一般是-1)，N(正值)

• tabindex=0，該元素能夠用tab鍵獲取焦點

  • 且訪問的順序是按照元素在文檔中的順序來focus，即便採用了浮動改變了頁面中顯示的順序，依然是按照html文檔中的順序來定位

• tabindex<=-1，該元素用tab鍵獲取不到焦點，可是能夠經過js獲取

  • 這樣就便於咱們經過js設置上下左右鍵的響應事件來focus
  • 取值 -1~-999 之間沒有區別，但爲了可讀性和一致性考慮，推薦使用 -1

• tabindex>=1，該元素能夠用tab鍵獲取焦點，並且優先級大於tabindex=0

  • 不過在tabindex>=1時，數字越小，越先定位到；
  • 若是多個元素擁有相同的 tabindex ，他們的相對順序按照他們在當前DOM中的前後順序決定

tabindex的使用

tabindex 決定聚焦順序

• 可聚焦元素中，正整數數值越大，順序越日後，正整數數值的節點順序比0值的節點靠前
• 代碼：

// HTML
<button type="button" tabindex="1">tabindex === 1</button>
<button type="button" tabindex="999">tabindex === 999</button>
<button type="button" tabindex="0">tabindex === 0</button>

• 效果：

• 可聚焦元素中，相同 tabindex 數值的節點，根據 DOM節點 前後順序決定聚焦順序
• 代碼：

// HTML
<button type="button" tabindex="0">tabindex === 0</button>
<button type="button" tabindex="1">tabindex === 1</button>
<button type="button" tabindex="999">tabindex === 999</button>
<button type="button" tabindex="0">tabindex === 0</button>

• 效果：

tabindex 決定是否聚焦

• 節點的 tabindex 設置爲 -1 時，當前節點使用 tab鍵 不能聚焦
• 代碼：

// HTML
<button type="button">未設置tabindex</button>
<button type="button" tabindex="-1">tabindex === -1</button>
<button type="button" tabindex="0">tabindex === 0</button>
<button type="button" tabindex="1">tabindex === 1</button>

• 效果：

tabindex 與JS編程聚焦

• 經過 tabindex 結合JS可讓默認不支持聚焦的節點進行聚焦,tabindex 爲不超出範圍的任何整數值均可以
• 代碼：

// HTML
<button type="button" @click="clickBtn()">點擊讓DIV聚焦</button>
<div id="FocusDiv" ref="FocusDiv" tabindex="-1">這是一個div</div>

// JS
clickBtn: function() {
    document.getElementById('FocusDiv').focus();
}

• 效果：
  

如何利用 tabindex 創造更好的用戶體驗

針對自定義標籤進行富交互優化

• 咱們在建立一個自定義的標籤時，若是默認行爲中不包含聚焦事件，咱們能夠使用 tabindex 爲它增長聚焦功能，從而能夠像不少可聚焦節點同樣進行順次焦點聚焦了

針對特定節點禁止聚焦操做

• 某些浮層及上層節點，如 toast組件、模態框、側邊彈出信息等，咱們不但願節點被用戶聚焦捕獲，能夠將節點的 tabindex 設置爲 -1，就能避免這一問題

複雜列表控制聚焦順序

• 一些複雜的樹形結構或者列式結構，若是須要用戶操做順序按照咱們預想的書序進行聚焦，能夠利用tabindex 值的大小來進行處理。

寫在最後

若是你以爲這篇文章對你有益，煩請點贊以及分享給更多須要的人！

快到碗裏來！百度校招還有HC！甩簡從來！

極速直接內推【字節跳動】&【百度】&【猿輔導】&【京東】

歡迎關注微信公衆號【全棧道路】，獲取更多科技相關知識及免費書籍。

往期好文

[萬字長文]百度和好將來面試經含答案

[前端面試]前端緩存問題看這篇，讓面試官愛上你

記一次慘痛的Vue-cli + VueX + SSR經歷

[三分鐘小文]前端性能優化-HTML、CSS、JS部分

[三分鐘小文]前端性能優化-頁面加載速度優化

[三分鐘小文]前端性能優化-網絡傳輸層優化