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

注： 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 后 记

感谢支持。

若不足之处，欢迎你们指出，共勉。

若是以为不错，记得 点赞，谢谢你们 ʚ💖ɞ

欢迎关注。

• GitHub
• 掘 金
• 简 书

5.1 原文地址

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