冷門的HTML - tabindex 的作用

全棧道路發表於2020-11-22
HTMLIndex

冷門的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！甩簡歷來！

極速直接內推【位元組跳動】&【百度】&【猿輔導】&【京東】

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

往期好文

相關文章