HTML tabindex用法及使用场景详解
tabindex定义
tabindex 全局属性 ,表示元素是否可以聚焦,以及是否能用**键盘导航(Tab)**选中
支持聚焦的HTML元素
- 带
href
属性的<a>
标签 - 带
href
属性的<link>
标签 <button>
<input>
(排除type='hidden'
)<select>
<textarea>
这些元素默认都能使用键盘Tab键,以及JS focus
方法聚焦
document.querySelector("a").focus();
在使用 Tab 键聚焦元素时,聚焦顺序等于元素在源码文件中的出现顺序。 尽管默认行为涵盖了我们所需的大多数交互需求。但在某些情况下,我们可能有移除、添加聚焦,或者重新安排项目聚焦顺序的需要,这个时候就要 tabindex
来帮忙了。
tabindex的值
tabindex接收一个整数作为值,具有不同的结果,具体结果取决于整数的值:
- 负值:通常为
index='-1'
,表示元素是可聚焦的,但是不能通过键盘导航来访问到该元素。
<button type="button">Click me to start, then press the "tab" key</button>
<button type="button">I’ll be in focus first</button>
<button type="button" tabindex="-1">I won’t be in focus :(</button>
<button type="button">I’ll be in focus last</button>
效果:
- 0:
tabindex='0'
,表示元素是可聚焦的,并且可以通过键盘导航来聚焦到该元素,相对顺序是当前元素处于DOM中的位置来决定的
<button type="button">Click me to start, then press the "tab" key</button>
<button type="button">I’ll be in focus first</button>
<div tabindex="0">I’m a DIV and will be in focus second</div>
<button type="button">I’ll be in focus last</button>
效果:
tabindex='0'
通常应用在不可聚焦的元素上,让这些元素变得原本就可聚焦一样。
- 正值:表示元素是可聚焦的,并且可以通过键盘导航来访问到该元素;它的相对顺序按照
tabindex
的数值递增而滞后获焦。如果多个元素拥有相同的tabindex
,它们的相对顺序按照他们在当前DOM中的先后顺序决定。
<button type="button" tabindex="1">I’m the first focusable item on the page</button>
<button type="button" tabindex="500">I’m the second</button>
效果:
键盘导航顺序
根据键盘序列导航的顺序,值为 0
、非法值、或者没有 tabindex
值的元素应该放置在 tabindex
值为正值的元素后面。
使用场景
负值场景
模态框是一个很好的说明例子。模态容器通常是不可聚焦的元素,像 <div>
或 <section>
这些元素,当模式窗口打开时,我们会将焦点移到该窗口,以便屏幕阅读器读其内容。但是,我们又不希望模式容器接受 Tab 聚焦。这时就可以使用一个 tabindex
负值来实现。
<div id="modal" tabindex="-1"><!-- Modal content -->
</div><script>
function openModal() {document.getElementById("modal").focus();// Other stuff to show modal
}
</script>
0场景
tabindex="0"
通常用来为不可聚焦元素添加可聚焦属性。
一个比较好的用例就是在使用自定义元素的时候。比如,我们在创建一个自定义按钮元素,由于它不是 <button>
,因此默认它是无法聚焦的。我们可以使用 tabindex
属性为它添加聚焦功能,就能像常规按钮一样会被安排焦点顺序了。
<my-custom-button tabindex="0">Click me!</my-custom-button>
正值场景
通过正值的大小关系调整键盘导航的访问先手顺序
原文搬运 How and when to use the tabindex attribute
译文搬运 [译] 如何使用 HTML tabindex 属性
HTML tabindex用法及使用场景详解相关推荐
- c语言指针用法及实际应用详解,通俗易懂超详细
c语言指针用法及实际应用详解,通俗易懂超详细! \\\插播一条:文章末尾有惊喜哟~/// 今天给大家来讲解一下指针. 我会由浅到深,最后联合实际应用讲解,让大家学会指针的同时,知道大佬们都用指针来干嘛 ...
- 转:修改ETM,用Ogre实现《天龙八部》地形与部分场景详解
本文主要讲的是<天龙八部>游戏的地形和一部分场景的具体实现,使用C++, Ogre1.6,我摸索了段时间,可能方法用的并不是最好的,但好歹实现了.文章可能讲得有点罗嗦,很多简单的东西都讲了 ...
- Redis(十)——HyperLogLog 基数统计和 Bitmap位图场景详解
文章目录 Redis(十)--HyperLogLog 基数统计和 Bitmap位图场景详解 1.HyperLogLog 基数统计 2.Bitmap位图场景详解 Redis(十)--HyperLogLo ...
- RxJava操作符在android中的使用场景详解(一)
转载请注明出处:http://www.wangxinarhat.com/2016/04/19/2016-04-19-rxjava-android-operate1/ 最近学习了RxJava在andro ...
- 直播回顾 | 数据驱动「产品迭代」的三大场景详解
近日,神策数据进行了一场题为<数据驱动产品迭代的三大场景>的专题直播,直播中结合各行业的数据驱动企业的优质实践经验,针对三大产品迭代场景进行了逐一详解.如下为直播的主要内容: 场景一. 产 ...
- JAVA中Explain注解用法,mysql之explain详解(分析索引最佳使用)
mysql之explain详解(分析索引最佳使用) mysql explain用于分析sql 语句的执行及数据库索引的使用.本文将致力于帮助大家充分理解explain所返回的各项参数,从而使大家快速掌 ...
- 消息中间件系列(四):消息队列MQ的特点、选型、及应用场景详解
前面集中谈了分布式缓存Redis系列: 高并发架构系列:分布式锁的由来.特点.及Redis分布式锁的实现详解 高并发架构系列:Redis并发竞争key的解决方案详解 高并发架构系列:Redis缓存和M ...
- 基于阿里云Serverless架构下函数计算的最新应用场景详解(二)
摘要: Serverless概念是近年来特别火的一个技术概念,基于这种架构能构建出很多应用场景,适合各行各业,只要对轻计算.高弹性.无状态等场景有诉求的用户都可以通过本文来普及一些基础概念,看看这些场 ...
- java 泛化_Java语言class类用法及泛化(详解)
这篇文章主要介绍了Java语言class类用法及泛化(详解),大家都知道Java程序在运行过程中,对所有的对象进行类型标识,也就是RTTI.这项信息记录了每个对象所属的类.虚拟机通常使用运行时类型信息 ...
最新文章
- 【c语言】蓝桥杯算法提高 一元一次方程
- PHP高并发的解决方案
- BZOJ2062 : 素颜2(face2)
- LOL快要凉?腾讯电竞应如何破除游戏生命周期诅咒
- CSS基础(part16)--CSS用户界面样式
- c语言subscripted_c语言。数组的问题。急!
- qdialog 返回值_QDialog exec()并获取结果值
- 为什么会有jQuery、Dojo、Ext、Prototype、YUI、Zepto这么多JS包?
- mysql skip-opt_FAQ系列 | mysqldump选项之skip-opt-阿里云开发者社区
- Nutanix的野心可不小!
- 推荐方法-1:UserCFItemCF
- TP-Link TD-W89841N 增强型无线路由器快速设置指南
- 智能手机射频前端架构初识: Phase 2/3/5/6/6L/7/7L/7LE
- 使用layui中的laypage遇到的各种问题总结
- 关于字符串的长度和大小的定义
- 在MS Word 中添加 Mathtype 插件(vbe6ext.olb不能被加载问题 已解决)
- arduino安装+esp32+esp8266安装
- 极致Review,阿里绩效管理的核心工具
- 回文是指正读反读均相同的字符序列,如“abba”和“abdba”均是回文但“good”不是回文,试写一个算法判断给定字符是否为回文。
- c语言如何将一个16进制转为2进制,[求助]如何实现16进制转2进制
热门文章
- android开发 java.lang.IllegalStateException at android.media.MediaPlayer._prepare(Native Method)
- BLE蓝牙的广播类型
- CDN网站加速的原理和流程
- 【luogu P1456 Monkey King】 题解
- ViewPagerIndicator
- 什么是闭包,对闭包的理解,闭包的用途及优缺点
- 【python量化】将Transformer模型用于股票价格预测
- 某高人整理的Java就业面试题大全【1】
- kurento服务器搭建(docker方式)
- 判断工作日还是休息日