tabindex 用法說明

1 前 言

tabindex 指示其元素是否能夠聚焦，以及它是否/在何處參與順序鍵盤導航。

本篇將介紹 tabindex 的一些用法。一般使用 tab 鍵移動焦點，使用空格鍵激活焦點。

2 規範 && 兼容

HTML 4	Only supported on <a>、<area>、 <button>、 <object>、 <select>、 <textarea>
HTML 5	All elements

• 兼容目前全部 PC瀏覽器 和 手機瀏覽器

3 定 義

• tabindex="-1" ：表示元素是可聚焦的，可是不能經過 tab 導航來訪問到該元素，能夠經過js獲取。
• tabindex="0" ：表示元素是可聚焦的，能夠經過 tab 導航來聚焦到該元素，它的相對順序是當前處於的DOM結構來決定的。若一個元素沒有設置 tabindex，默認值爲 0。
• tabindex 大於 0 ：表示元素是可聚焦的，能夠經過 tab 導航來訪問到該元素；它的相對順序按照 tabindex 的數值遞增而滯後獲焦（先獲取值小的）。若是多個元素擁有相同的 tabindex，它們的相對順序按照他們在當前DOM中的前後順序決定。

注： tabindex 的最大值不該超過 32767

4 使 用

4.1 獲取焦點 activeElement

• 返回當前頁面中得到焦點的元素，該屬性是隻讀的。
• 頁面加載中，document.activeElement 爲 null。
• 頁面剛剛加載完成，document.activeElement 爲 body 元素的引用。
• 不支持 IE。

4.2 設置焦點

4.2.1 tab 鍵

使用 tab 鍵來根據 tabindex 的定義來切換焦點

4.2.2 focus()

document.getElementById("id").focus();
document.getElementById("id").focus({preventScroll:false});

• preventScroll 默認爲 false，表示當觸發時，瀏覽器會將元素滾動到視圖中。
• preventScroll 爲 true，則不發生滾動。
• 非表單元素，須設置 tanindex="-1"。

4.2.3 autofocus

• 該屬性會使元素在頁面加載時會自動得到焦點，除非用戶覆蓋它。
• 若是設置多個，則會將第一個擁有該屬性的元素設爲初始焦點。
• 該屬性只能用於表單元素。

<select id="mySelect" autofocus>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

// 返回一個 Boolean
// Check if the autofocus attribute on the <select>
var hasAutofocus = document.getElementById('mySelect').autofocus;

4.3 判斷焦點 hasFocus()

若是當前頁面的活動元素得到了焦點，Document.hasFocus() 返回 true，不然爲 false。能夠用來判斷用戶是否正在與該頁面進行交互。

4.4 取消焦點

document.getElementById("id").blur();

blur() 會將焦點從元素中移走，並非轉移到其餘特定元素上。

4.5 焦點事件

element.onfocus = function(){}
element.onblur = function(){}
element.onfocusin = function(){}
element.onfocusout = function(){}

element.addEventListener("focus", function(){})
element.addEventListener("blur", function(){})
element.addEventListener("focusin", function(){})
element.addEventListener("focusout", function(){})

• focus ：在元素獲取焦點時觸發，不支持冒泡
• focusin ：在元素獲取焦點時觸發，支持冒泡
• blur ：在元素失去焦點時觸發，不支持冒泡
• focusout ：在元素失去焦點時觸發，支持冒泡

5 後 記

感謝支持。

若不足之處，歡迎你們指出，共勉。

若是以爲不錯，記得 點贊，謝謝你們 ʚ💖ɞ

歡迎關注。

• GitHub
• 掘 金
• 簡 書

5.1 原文地址

https://xrkffgg.github.io/Knotes/blog/14.html