tabindex 用法说明

2020-08-03T04:16:29
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

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.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 后 记

感谢支持。

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

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

扫一扫关注公众号添加购物返利助手,领红包
当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »
因本文不是用Markdown格式的编辑器书写的,转换的页面可能不符合MIP标准。