1 前 言

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

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

2 規範 && 兼容

• 兼容目前所有 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