tabindex属性

描述 (Description)

The tabindex is used to define a sequence that users follow when they use the Tab key to navigate through a page. By default, the natural tabbing order will match the source order in the markup. In certain circumstances it may be necessary to override the default tabbing order, but it’s strongly recommended that you craft a page in a logical flow and let the browser work through it in the default order—an approach that negates the need for the tabindex attribute.

tabindex用于定义用户使用Tab键浏览页面时遵循的顺序。 默认情况下,自然制表顺序将与标记中的源顺序匹配。 在某些情况下,可能有必要覆盖默认的制表顺序,但是强烈建议您以逻辑流程制作页面,并让浏览器以默认顺序浏览该页面-这种方法不需要使用tabindex属性。

A tabindex can start at 0 and increment in any value. As such, the sequence 1, 2, 3, 4, 5 would be fine, as would 10, 20, 30, 40, 50. If you need to introduce a tabindex, it’s advisable to use a sequence that contains intervals (like the second example provided), as this will give you the opportunity to inject other controls later if need be (for example, 10, 15, 20) without having to reindex all the tabindex values on the page. Should a given tabindex value be applied to more than one element (e.g. all links in one section given a tabindex of “1”, and sidebar links given a tabindex of “2”), the tabbing order of those affected elements will be as per the source markup order. Many people will choose to use this approach rather than a sequence with a defined interval, such as 5, 10, 15, because it allows for additional links or form controls to be added without the headache of re-numbering. If a tabindex of “-1” is used, the element it’s applied to will no longer be keyboard focusable.

tabindex可以从0开始,可以任意增加。 因此,顺序1、2、3、4、5和10、20、30、40、50都可以。如果需要引入tabindex ,建议使用包含间隔的序列(例如提供第二个示例),因为这将使您有机会在以后需要时(例如10、15、20)注入其他控件,而不必重新索引页面上的所有tabindex值。 如果将给定的tabindex值应用于一个以上的元素(例如,一节中的所有链接的tabindex为“ 1”,侧栏链接的tabindex为“ 2”),则受影响元素的制表顺序将按照源标记顺序。 许多人会选择使用此方法,而不是使用具有定义间隔的序列,例如5、10、15,因为它允许添加其他链接或表单控件,而无需重新编号。 如果使用tabindex为“ -1”,则应用于该元素的元素将不再是键盘可聚焦的。

If a tabindex is set anywhere on a page—even if it’s the hundredth link or the fiftieth form control—the tab order will start at the element with the lowest tabindex value, and work through the increments. Only then will the tab order take in the remaining elements for which no tabindex has been set. As such, great care must be taken to ensure that adding a tabindex doesn’t harm the usability of the page as a whole.

如果将tabindex设置在页面上的任何位置(即使是第百个链接或第五十个窗体控件),则制表符顺序将从具有最低tabindex值的元素开始,并逐步进行。 只有这样,制表符顺序才会接受未设置tabindex的其余元素。 因此,必须tabindex小心,以确保添加tabindex不会损害整个页面的可用性。

If the disabled attribute is set on an element which has a tabindex, that tabindex will be ignored.

如果将禁用属性设置在具有tabindex的元素上,则该tabindex将被忽略。

例 (Example)

The tabindex is set to "3" for the link below:

以下链接的tabindex设置为"3"

<p>You can try our <a href="cakes.html" tabindex="3">lovely
range of cakes</a>.</p>

值 (Value)

This attribute can take any numeric value.

此属性可以采用任何数值。

翻译自: https://www.sitepoint.com/tabindex-html-attribute/

tabindex属性

tabindex属性_tabindex(HTML属性)相关推荐

  1. tabindex, taborder和notab属性的区别

    tabindex, taborder和notab属性默认状态下,所有元素(隐藏元素除外)都是表单制表(tab)顺序的一部分.当用户按下Tab键时,浏览器会将输入焦点由表单中的这个元素转移到下一个元素上 ...

  2. tabindex 属性 html5洗属性 规定当使用 “tab“ 键进行导航时元素的顺序。

    tabindex 属性 html5洗属性  规定当使用 "tab" 键进行导航时元素的顺序. 定义和用法 tabindex 属性规定当使用 "tab" 键进行导 ...

  3. Python 类—类属性(私有属性、公有属性、实例属性、局部变量)类方法(实例方法、静态方法)

    1. 创建类 类是对某个对象的定义,它包含有关对象动作方式的信息,包括它的名称.方法.属性和事件.类不存在于内存中,因此它本身并不是对象.当程序运行需要引用类的代码时,就会在内存中创建一个类的新实例, ...

  4. items属性的combo_【内存消耗问题】DataGridViewComboboxColoumn关于Items属性和DataSource属性的性能开销问题...

    [问题场景]:新建窗体应用程序,Form中添加1个DataGridView控件,并新增1列数据(列类型为DataGridViewComboboxColoumn).下拉列表绑定15000条选项值,表格添 ...

  5. R语言attributes函数(获取属性、设置属性)、attr函数(改变一个属性)、structure函数(改变数据形状)实战

    R语言attributes函数(获取属性.设置属性).attr函数(改变一个属性).structure函数(改变数据形状)实战 目录

  6. python 类 公有属性、私有属性、公有方法、私有方法

    python 类 公有属性.私有属性.公有方法.私有方法 #!/usr/bin/env python # -*- encoding: utf-8 -*- """ @Int ...

  7. Swift类与结构、存储属性、计算属性、函数与方法、附属脚本等

    一.类与结构体 两者在Swift中差不了多少了 类与结构体有很多相同的地方: (第2,3点是其他语言中不存在的) 1)都可以定义属性/方法/下标(结构体也可以定义方法了) 2)都能初始化(通过构造方法 ...

  8. html表单的常用属性有哪些,整理HTML5中表单的常用属性及新属性

    这篇文章主要介绍了使用HTML5进行SVG矢量图形绘制的入门教程,包括基本图形的绘制和简单的渐变效果等介绍,注意旧版本IE对其的支持并不好,需要的朋友可以参考下 HTML5 新的表单属性 HTML5 ...

  9. python类中的属性分为类属性和实例属性两种_python中类和实例如何绑定属性与方法示例详解...

    前言 python类与实例的方法的调用中觉得云里雾里,思考之后将自己的想法记录下,一来加深自己理解,巩固自己记忆,而来帮助一些想要学习python的朋友理解这门抽象的语言,由于Python是动态语言, ...

  10. 前端笔记(3)css,选择器,文字文本属性,外观属性

    CSS样式表(1) (1)css概念 引入css的三种方法 行内式(内联样式) 内部样式表(内嵌样式表) 外部样式表(外链式) (2)css选择器 css基础选择器 标签选择器 类选择器 id选择器 ...

最新文章

  1. 搭建nexus后,进入首页的时候出现warning: Could not connect to Nexus.错误
  2. 基于视觉惯性里程计的无监督深度补全方法
  3. MSSQL差异备份取系统权限
  4. Struts2 - 上传任意多个文件
  5. 您与此网站建立的连接不安全_PERT地暖管热熔连接到底安全不安全?
  6. apidoc文档项目构建
  7. ubuntu16.04 Linux+xfce4的文件夹出现两种背景颜色+文件夹中右键打开终端失灵了.
  8. CAN总线技术 | 数据链路层01 - CAN报文的组成
  9. git 代理 git_生日快乐,Git
  10. 太牛X了! 呕心沥血整理的4000页Java学习手册文档!
  11. 推荐6本Java书籍,助你在Java路上更精进!
  12. 阿里云服务器搬迁记录(2021年3月)
  13. python转义字符与原字符
  14. 方正飞鸿:OA系统先进性如何在工作流中体现
  15. SEO新手一分钟入门教程
  16. 现代治理12.0:Diligent发出“现代领导力”倡议,帮助组织创建更具多元化和包容性的董事会和领导团队
  17. chipsel语言_英语快速记忆法视频
  18. mm游戏大全HTML5小游戏,HTML5小游戏——看你有多色(示例代码)
  19. SpringMVC的基本使用+原理,一篇囊括
  20. 什么是非同质化代币(non-fungible token)?关于NFT你需要知道的一切

热门文章

  1. (41)ObjectARX2015 + vs2012 JIG-基本的拖动
  2. jsp之JDBC连接数据库MySQL
  3. 【SQL】 使用SQL语句在表中添加数据(一条 / 多条)
  4. 对比学习triple loss
  5. VTM1.0代码阅读:CodingStructure类主要函数
  6. echarts 外部按钮触发图片下载
  7. 用C语言读写文本文件
  8. 新手小白该如何真正起步做跨境电商独立站?
  9. THE SCHOOLS WHERE APPLE, GOOGLE, AND FACEBOOK GET THEIR RECRUITS
  10. “金牌城市”,烟台新坐标