轉載一篇關於tab鍵與focus的文章

Focusable

HTML 元素中，並非全部元素均可以得到焦點，有以下元素能夠得到焦點: a, area, button, input, object, select, textarea，這些元素就是 focusable 元素。

而除了上述元素以外，還能夠經過以下方式使元素變爲 focusable 元素：

• 設置了 tabindex 屬性的元素
• 設置了 contenteditable="true" 屬性的元素

要想一個 focusable 元素得到焦點，則有三種方式：

• 使用鼠標點擊元素
• 調用元素的 focus() 方法
• 經過 Tab 鍵進行卻換

tabindex

tabindex 的一大做用就是讓元素能夠得到焦點，從而觸發 focus 狀態。給聯繫人列表的元素 li 都加上該屬性後，我遇到的問題也就解決了。

tabindex 的另外一個做用，就是設定 Tab 鍵切換的順序。tabindex 有以下幾個值:

• 1 ~ 32767: 經過 Tab 鍵切換時，切換順序將遵循數字的大小(從小到大)，數字相同則按出現的前後次序進行切換
• 0: 默認值，當 tabindex > 0 的元素都切換以後，纔會切換到 tabindex = 0 的元素，而且按出現的前後次序進行切換
• 負數(一般爲 -1): 經過 Tab 鍵沒法切換到該元素，但鼠標點擊能夠獲取焦點