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 后 記
感謝支持。
若不足之處，歡迎大家指出，共勉。
如果覺得不錯，記得 點贊，謝謝大家 ????
歡迎關注。
