門的HTML - tabindex 的作用

HTML 的 tabindex 屬性開發(fā)過程中一般不會(huì)使用到，最近開發(fā)中有個(gè)需求兼顧富交互，便總結(jié)了一下。本篇文章同時(shí)收錄在我的【前端知識(shí)點(diǎn)】中，Github鏈接請(qǐng)點(diǎn)擊閱讀原文直達(dá)，歡迎 Star

兼容性：Safari不支持！

閱讀本文您將收獲

• tabindex的作用
• tabindex的使用
• 如何利用 tabindex 創(chuàng)造更好的用戶體驗(yàn)

前言

在我們?nèi)粘Ｊ褂镁W(wǎng)頁的過程中，可以通過鍵盤控制一些元素的聚焦，從而達(dá)到便捷訪問的目的

element 分為 focusable 和 非focusable ,如果使用了tabindex就可以改變相關(guān)的行為

在HTML中有6個(gè)元素默認(rèn)支持聚焦：

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

以上的元素默認(rèn)都可以使用 Tab 鍵，以及 JS focus() 方法聚焦

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

使用 tab鍵 進(jìn)行聚焦元素時(shí)，聚焦的順序等于元素在代碼中的出現(xiàn)先后順序，當(dāng)我們進(jìn)行富交互優(yōu)化時(shí)，就需要用到 tabindex 這個(gè)屬性來幫助我們進(jìn)行更好用戶體驗(yàn)的優(yōu)化了

tabindex的作用

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

②元素什么時(shí)候能聚焦：在用戶通過鍵盤與頁面交互時(shí)

通俗來說：就是當(dāng)用戶使用鍵盤時(shí)，tabindex用來定位html元素,即使用tab鍵時(shí)焦點(diǎn)的順序。

tabindex的范圍

tabindex理論上可以使用在幾乎所有元素上

• tabindex 理論上可以用在幾乎所有元素上，不管這個(gè)元素默認(rèn)是否支持聚焦

tabindex 有三個(gè)值：0，-N(通常是-1)，N(正值)

• tabindex=0，該元素可以用tab鍵獲取焦點(diǎn)
• 且訪問的順序是按照元素在文檔中的順序來focus，即使采用了浮動(dòng)改變了頁面中顯示的順序，依然是按照html文檔中的順序來定位
• tabindex<=-1，該元素用tab鍵獲取不到焦點(diǎn)，但是可以通過js獲取
• 這樣就便于我們通過js設(shè)置上下左右鍵的響應(yīng)事件來focus
• 取值 -1~-999 之間沒有區(qū)別，但為了可讀性和一致性考慮，推薦使用 -1
• tabindex>=1，該元素可以用tab鍵獲取焦點(diǎn)，而且優(yōu)先級(jí)大于tabindex=0
• 不過在tabindex>=1時(shí)，數(shù)字越小，越先定位到；
• 如果多個(gè)元素?fù)碛邢嗤?tabindex ，他們的相對(duì)順序按照他們?cè)诋?dāng)前DOM中的先后順序決定

tabindex的使用

tabindex 決定聚焦順序

• 可聚焦元素中，正整數(shù)數(shù)值越大，順序越往后，正整數(shù)數(shù)值的節(jié)點(diǎn)順序比0值的節(jié)點(diǎn)靠前
• 代碼：

// 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 數(shù)值的節(jié)點(diǎn)，根據(jù) DOM節(jié)點(diǎn) 先后順序決定聚焦順序
• 代碼：

// 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 決定是否聚焦

• 節(jié)點(diǎn)的 tabindex 設(shè)置為 -1 時(shí)，當(dāng)前節(jié)點(diǎn)使用 tab鍵 不能聚焦
• 代碼：

// HTML
<button type="button">未設(shè)置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 結(jié)合JS可以讓默認(rèn)不支持聚焦的節(jié)點(diǎn)進(jìn)行聚焦,tabindex 為不超出范圍的任何整數(shù)值都可以
• 代碼：

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

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

• 效果：

如何利用 tabindex 創(chuàng)造更好的用戶體驗(yàn)

針對(duì)自定義標(biāo)簽進(jìn)行富交互優(yōu)化

• 我們?cè)趧?chuàng)建一個(gè)自定義的標(biāo)簽時(shí)，如果默認(rèn)行為中不包含聚焦事件，我們可以使用 tabindex 為它增加聚焦功能，從而可以像很多可聚焦節(jié)點(diǎn)一樣進(jìn)行順次焦點(diǎn)聚焦了

針對(duì)特定節(jié)點(diǎn)禁止聚焦操作

• 某些浮層及上層節(jié)點(diǎn)，如 toast組件、模態(tài)框、側(cè)邊彈出信息等，我們不希望節(jié)點(diǎn)被用戶聚焦捕獲，可以將節(jié)點(diǎn)的 tabindex 設(shè)置為 -1，就能避免這一問題

復(fù)雜列表控制聚焦順序

• 一些復(fù)雜的樹形結(jié)構(gòu)或者列式結(jié)構(gòu)，如果需要用戶操作順序按照我們預(yù)想的書序進(jìn)行聚焦，可以利用tabindex 值的大小來進(jìn)行處理。

現(xiàn)效果：

<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

實(shí)現(xiàn)代碼：