转载一篇关于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 键没法切换到该元素，但鼠标点击能够获取焦点