冷门的HTML - tabindex 的作用
冷门的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
键,以及 JSfocus()
方法聚焦
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!甩简历来!
极速直接内推【字节跳动】&【百度】&【猿辅导】&【京东】
欢迎关注微信公众号【全栈道路】,获取更多科技相关知识及免费书籍。
往期好文
冷门的HTML - tabindex 的作用的更多相关文章
- Vue3.0 响应式数据原理:ES6 Proxy
Vue3.0 开始用 Proxy 代替 Object.defineProperty了,这篇文章结合实例教你如何使用Proxy 本篇文章同时收录[前端知识点]中,链接直达 阅读本文您将收获 JavaSc ...
- img标签到底是行内元素还是块级元素
面试官问你<img>是什么元素时你怎么回答 写这篇文章源自我之前的一次面试,题目便是问img标签属于块级元素还是行内元素,当时想都没想就说了是行内(inline)元素,面试官追问为什么能够 ...
- dom元素的tabindex属性介绍及在vue项目中的应用
dom元素的tabindex属性介绍及在vue项目中的应用 tabindex属性作用 让普通dom元素变为可聚焦的元素 让普通dom元素可以参与顺序键盘导航(通常使用Tab键,因此得名). tabin ...
- html表单代码演示
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- C# Tab键TabIndex使用问题(顺序,不起作用,跳过某个元素等问题)
C#.net语言,winform程序.一个画面中有多个控件,但是在添加的时候顺序是错的,所以现在想改Tab顺序,需要用到TabIndex ,如何设置控件TabIndex 1.选中窗口控件-右键-属性, ...
- html中input标签的tabindex属性
当浏览者浏览网站时可以通过按TAB键在网页的链接中依次移动,这是一个相当方便实用的功能.但如果网页中链接太多,恐怕按TAB键就没什么作用了,这时不妨通过改变TAB键移动的顺序来突出重点,在某些重要页面 ...
- static关键字作用总结
之前讲到final关键字的作用是每次面试的时候我必问求职者的两个问题之一,另外一个问题就是文本会写到的static.final和static一样,都是一个小问题可以看到一个人的基础是否扎实以及平时是否 ...
- 如何实现select组件的选择输入过滤作用
实现select组件的选择输入过滤作用的js代码如下: /** *其中//******之间的部分显示的是在没有选择输入过滤功能的代码上加入的功能代码 ** / (function ( $ ) { $. ...
- angularJs关于指令的一些冷门属性
我们使用ng的时候,经常会使用到指令,大家所熟知的属性我在这里就不介绍了,讲讲大家没怎么留意的属性 1.multiElement 这是指定指令作用区间的功能,最常用的就是ng-repeat-start ...
随机推荐
- Archery安装教程
一. CentOS设置 1. 更换阿里源 curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos ...
- 算法初步(julyedu网课整理)
date: 2018-11-19 13:41:29 updated: 2018-11-19 14:31:04 算法初步(julyedu网课整理) 1 O(1) 基本运算 O(logn) 二分查找 分治 ...
- npm的使用说明
博主是刚开始写项目的前端小白菜,边学边整理,以供后面的小猿参考,共同进步. 首先: npm的官网地址:https://www.npmjs.com Windows 安装包(.msi) 32 位安装包下载 ...
- Zeal(文档)安装使用
Zeal是一个为软件开发者提供的离线文档浏览器. 一.下载安装 下载地址:https://zealdocs.org/ 二.安装后下载自己需要的文档 1.通过Zeal原生源直接下载文档 Tools -& ...
- Kubernetes Scheduler浅析
概述 Kubernetes 调度器(Scheduler)是Kubernetes的核心组件:用户或者控制器创建Pod之后,调度器通过 kubernetes 的 watch 机制来发现集群中新创建且尚未被 ...
- python 作业 日报模板输出
1 #!/usr/bin/env python 2 # coding: utf-8 3 4 import numpy as np 5 import pandas as pd 6 7 path='C:/ ...
- 多快好省地使用pandas分析大型数据集
1 简介 pandas虽然是个非常流行的数据分析利器,但很多朋友在使用pandas处理较大规模的数据集的时候经常会反映pandas运算"慢",且内存开销"大". ...
- NB-IOT覆盖范围有多大 NB-IOT的强覆盖是怎么实现的
NB-IoT技术自出现以来就以其强大的覆盖范围和通讯距离长而受到广泛的欢迎,发展到现在已经成为万物互联网络中的一个重要分支.那么NB-IoT覆盖范围到底有多大,是怎么来衡量其覆盖能力? 强大的覆盖范围 ...
- TCP 队列溢出了
一.TCP 队列 1.syns queue:半连接队列 TCP 三次握手(参考:TCP建立连接之三次握手),第一步,服务端接收到客户端发送的 syn 消息后,将连接信息放入 syns queue,此时 ...
- uniApp打卡日历
功能 滑动切换时间,打点功能,支持月周切换日历组件 这是一款支持滑动切换以及周模式和月模式切换功能的日历组件,可以设置打卡信息,自定义样式. 组件样式使用了sass所有需要项目中先安装node- ...