冷门的HTML - tabindex 的作用

HTML 的 tabindex 属性开发过程中一般不会使用到,最近开发中有个需求兼顾富交互,便总结了一下。本篇文章同时收录在我的【前端知识点】中,Github链接直达,欢迎 Star

按照惯例,放上官方定义

兼容性:Safari不支持!

阅读本文您将收获

  • tabindex的作用

  • tabindex的使用

  • 如何利用 tabindex 创造更好的用户体验

前言

  • 在我们日常使用网页的过程中,可以通过键盘控制一些元素的聚焦,从而达到便捷访问的目的

  • element 分为 focusable非focusable ,如果使用了tabindex就可以改变相关的行为

  • 在HTML中有6个元素默认支持聚焦:

    • href 属性的 <a> 标签

    • href 属性的 <link> 标签

    • <button></button> 标签

    • <input /> 标签 (排除带有 type="hidden" 属性的)

    • <select></select> 标签

    • <textarea></textarea> 标签

  • 以上的元素默认都可以使用 Tab 键,以及 JS focus() 方法聚焦

document.querySelector("a").focus();
  • 使用 tab键 进行聚焦元素时,聚焦的顺序等于元素在代码中的出现先后顺序,当我们进行富交互优化时,就需要用到 tabindex 这个属性来帮助我们进行更好用户体验的优化了

tabindex的作用

  • ①元素是否能聚焦:通过键盘这类输入设备,或者通过 JS focus() 方法

  • ②元素什么时候能聚焦:在用户通过键盘与页面交互时

  • 通俗来说:就是当用户使用键盘时,tabindex用来定位html元素,即使用tab键时焦点的顺序。

tabindex的范围

tabindex理论上可以使用在几乎所有元素上
  • tabindex 理论上可以用在几乎所有元素上,不管这个元素默认是当否支持聚焦

tabindex 有三个值:0,-N(通常是-1),N(正值)
  • tabindex=0,该元素可以用tab键获取焦点

    • 且访问的顺序是按照元素在文档中的顺序来focus,即使采用了浮动改变了页面中显示的顺序,依然是按照html文档中的顺序来定位

  • tabindex<=-1,该元素用tab键获取不到焦点,但是可以通过js获取

    • 这样就便于我们通过js设置上下左右键的响应事件来focus

    • 取值 -1~-999 之间没有区别,但为了可读性和一致性考虑,推荐使用 -1

  • tabindex>=1,该元素可以用tab键获取焦点,而且优先级大于tabindex=0

    • 不过在tabindex>=1时,数字越小,越先定位到;

    • 如果多个元素拥有相同的 tabindex ,他们的相对顺序按照他们在当前DOM中的先后顺序决定

tabindex的使用

tabindex 决定聚焦顺序
  • 可聚焦元素中,正整数数值越大,顺序越往后,正整数数值的节点顺序比0值的节点靠前

  • 代码:

// HTML
<button type="button" tabindex="1">tabindex === 1</button>
<button type="button" tabindex="999">tabindex === 999</button>
<button type="button" tabindex="0">tabindex === 0</button>
  • 效果:

  • 可聚焦元素中,相同 tabindex 数值的节点,根据 DOM节点 先后顺序决定聚焦顺序

  • 代码:

// HTML
<button type="button" tabindex="0">tabindex === 0</button>
<button type="button" tabindex="1">tabindex === 1</button>
<button type="button" tabindex="999">tabindex === 999</button>
<button type="button" tabindex="0">tabindex === 0</button>
  • 效果:

tabindex 决定是否聚焦
  • 节点的 tabindex 设置为 -1 时,当前节点使用 tab键 不能聚焦

  • 代码:

// HTML
<button type="button">未设置tabindex</button>
<button type="button" tabindex="-1">tabindex === -1</button>
<button type="button" tabindex="0">tabindex === 0</button>
<button type="button" tabindex="1">tabindex === 1</button>
  • 效果:

tabindex 与JS编程聚焦
  • 通过 tabindex 结合JS可以让默认不支持聚焦的节点进行聚焦,tabindex 为不超出范围的任何整数值都可以

  • 代码:

// HTML
<button type="button" @click="clickBtn()">点击让DIV聚焦</button>
<div id="FocusDiv" ref="FocusDiv" tabindex="-1">这是一个div</div>

// JS
clickBtn: function() {
    document.getElementById('FocusDiv').focus();
}
  • 效果:

如何利用 tabindex 创造更好的用户体验

针对自定义标签进行富交互优化

  • 我们在创建一个自定义的标签时,如果默认行为中不包含聚焦事件,我们可以使用 tabindex 为它增加聚焦功能,从而可以像很多可聚焦节点一样进行顺次焦点聚焦了

针对特定节点禁止聚焦操作

  • 某些浮层及上层节点,如 toast组件、模态框、侧边弹出信息等,我们不希望节点被用户聚焦捕获,可以将节点的 tabindex 设置为 -1,就能避免这一问题

复杂列表控制聚焦顺序

  • 一些复杂的树形结构或者列式结构,如果需要用户操作顺序按照我们预想的书序进行聚焦,可以利用tabindex 值的大小来进行处理。

写在最后

如果你觉得这篇文章对你有益,烦请点赞以及分享给更多需要的人!

快到碗里来!百度校招还有HC!甩简历来!

极速直接内推【字节跳动】&【百度】&【猿辅导】&【京东】

(0)

相关推荐

  • 单反相机上你不知道的冷门功能却起着很重要的作用

    都知道单反相机是专业相机,在单反相机中集成了很多功能,但这些功能有很少有人去用,所以我们称它们为单反相机的冷门功能,其实单反相机上你不知道的冷门功能却起着很重要的作用. 对于新手摄影师来说拍照片总是把 ...

  • 《三国战纪》那些冷门道具的作用,揭秘史记残页最终的秘密

    最近不少下伙伴都在评论区留言咨询三国战纪中一些比较冷门道具的作用,今天小编通过各种收集整理,为大家全面介绍一下三国战纪中那些比较冷门道具的各种用途. 首先我们都知道在这款游戏中人物道具包是有两个的,分 ...

  • 肾脏保护作用的常用沙坦类降压药,10个冷门却极有用的知识!赶紧收藏

    氯沙坦.缬沙坦.奥美沙坦.坎地沙坦.厄贝沙坦.替米沙坦,这些药名,想必高血压朋友都不陌生,尤其在肾内科用得很广泛. 沙坦类药,主要治疗作用是相似的,降压同时,尤其能够为慢性肾病患者减少尿蛋白,降低尿毒 ...

  • 单反相机上你不知道的那些冷门功能起着重大作用

    都知道单反相机是专业相机,在单反相机中集成了很多功能,但这些功能有很少有人去用,所以我们称它们为单反相机的冷门功能,其实单反相机上的功能都是有很大用处的,只不过是摄影师懒得用,接下来我们就来看看单反相 ...

  • 美国海岸警卫队使用的90岁老枪 冷门“撇缆枪”特殊作用难以取代

    如果本人要说,美国海岸警卫队还在使用九十高龄的老枪,你是否会觉得这是无稽之谈? 但这确实是真的,这是美国海岸警卫队正在装备使用的斯普林菲尔德M1903步枪改装而来的"撇缆枪".该枪 ...

  • 红枣的功效与作用

    红枣的功效主要是几个方面, 一是健脾益气,第二是养阴安神,第三能够调和药性.展开来讲它的作用,健脾益气方面,比如说脾气虚弱出现的纳呆.便溏.乏力这些表现的时候,它可以同党参.白术.茯苓等等一块入药,起 ...

  • 一级、二级、三级配电的作用以及用途

    我们做个假设:有一个新建的小区引进一条10kV进线,建了一个配电室,从变压器低压端出线0.4kV到配电柜(一级配电柜),再引出线到每栋楼的配电箱(二级配电箱),再出线到每个单元楼的配电柜(三级配电), ...

  • 穴位的作用

    青霉素的作用和主治.第一,是对由a组β溶血性链球菌引起的咽炎,猩红热,蜂窝织炎,化脓性的关节炎,肺炎,产褥热以及败血症,青霉素有较好的疗效,为首选药物:第二,适用于其他链球菌引起的感染,包括b组β溶血 ...

  • 密蒙花的功效与作用有

    使密蒙花,先拣令净,用酒浸泡一宿,出候干,却拌蜜润,蒸,至出,日干,如此拌蒸三度,又却日干用.每修事一两,用酒八两浸,待色变,用蜜半,蒸为度.密蒙花配伍枸杞子:密蒙花清肝养血,明目;枸杞子补肝肾而明目 ...