冷門的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鍵，以及 JSfocus()方法聚焦
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部分
[三分鐘小文]前端性能優化-頁面加載速度優化
[三分鐘小文]前端性能優化-網路傳輸層優化
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/226481.html
標籤：Html/Css
下一篇：第十章 二叉搜索樹