tabindex 用法说明
2019-12-23 本文已影响0人
xrkffgg
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 后 记
感谢支持。
若不足之处，欢迎大家指出，共勉。
如果觉得不错，记得 点赞，谢谢大家 ʚ💖ɞ
欢迎关注。
