# 14. tabindex 用法说明

# 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中的先后顺序决定。

WARNING

注:tabindex 的最大值不应超过 32767

# 4 使 用

# 4.1 获取焦点 activeElement

  • 返回当前页面中获得焦点的元素,该属性是只读的。
  • 页面加载中,document.activeElementnull
  • 页面刚刚加载完成,document.activeElementbody 元素的引用。
  • 不支持 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,表示当触发时,浏览器会将元素滚动到视图中。
  • preventScrolltrue,则不发生滚动。
  • 非表单元素,须设置 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 后 记

感谢支持。

若不足之处,欢迎大家指出,共勉。

如果觉得不错,记得 点赞,谢谢大家 ʚ💖ɞ

欢迎关注。

# 5.1 原文地址

https://xrkffgg.github.io/Knotes/blog/14.html

上次更新: 12/23/2019, 6:06:13 PM