转载一篇关于tab键与focus的文章

Focusable

HTML 元素中,并不是所有元素都可以获得焦点,有如下元素可以获得焦点: aareabuttoninputobjectselecttextarea,这些元素就是 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 键无法切换到该元素,但鼠标点击可以获取焦点
posted @ 2017-08-01 22:07  拿饭盒当烟灰缸  阅读(463)  评论(0编辑  收藏  举报