在HTML中tabindex属性的用途是什么?
当前回答
Tabindex是一个全局属性,负责两件事:
它设置了“可聚焦”元素和的顺序 它使元素“可聚焦”。
In my mind the second thing is even more important than the first one. There are very few elements that are focusable by default (e.g. <a> and form controls). Developers very often add some JavaScript event handlers (like 'onclick') on not focusable elements (<div>, <span> and so on), and the way to make your interface be responsive not only to mouse events but also to keyboard events (e.g. 'onkeypress') is to make such elements focusable. Lastly, if you don't want to set the order but just make your element focusable use tabindex="0" on all such elements:
<div tabindex="0"></div>
同样,如果你不想通过tab键来聚焦,那么使用tabindex="-1"。例如,当使用tab键遍历时,下面的链接将不会被聚焦。
<a href="#" tabindex="-1">Tab key cannot reach here!</a>
其他回答
通常,当用户在表单中从一个字段切换到另一个字段时(在允许选项卡的浏览器中,并非所有浏览器都允许),顺序是字段在HTML代码中出现的顺序。
然而,有时您希望制表符顺序略有不同。在这种情况下,可以使用TABINDEX对字段进行编号。然后,制表符按照TABINDEX从最低到最高的顺序流动。
更多信息可以在这里找到w3
在这里可以找到另一个很好的例子
通过控件的标签通常在控件出现在HTML代码中时按顺序发生。
使用tabindex,制表符将按照tabindex顺序从最低的控件流向最高的控件
你设置的值决定了你的键盘焦点在网站元素之间移动的顺序。
在下面的例子中,当你第一次按tab键时,你的光标将移动到#foo,然后是#awesome,然后是#bar
<input id="foo" tabindex="1" />
<input id="bar" tabindex="3" />
<input id="awesome" tabindex="2" />
如果您没有在任何地方定义标签索引,键盘焦点将按照HTML文档中定义标签的顺序跟随页面的HTML标记。
如果你标签的次数超过了你指定的标签索引,焦点将会移动,就好像没有标签索引一样,也就是说,按照HTML标签出现的顺序
控制页内标签的顺序(按tab键移动焦点)。
参考:http://www.w3.org/TR/html401/interact/forms.html # h-17.11.1
简单来说,tabindex用于关注元素。 语法:tabindex = " numeric_value " 这个numeric_value是element的权重。较低的值将首先访问。
推荐文章
- CSS div元素-如何显示水平滚动条只?
- 将Dropzone.js与其他字段集成到现有的HTML表单中
- 使用“!”的含义是什么?重要的”?
- 资源解释为样式表,但以MIME类型text/html传输(似乎与web服务器无关)
- 复选框输入是否只在被选中时才发布数据?
- 是类型="文本/css"必须在<链接>标签?
- 如何将LaTeX与Markdown混合?
- 如何使<div>总是全屏?
- 如何中心div垂直内绝对定位的父div
- 创建一个可变长度的字符串,用重复字符填充
- 有效使用< >(锚标签)没有href属性?
- 如何将全局字体应用到整个HTML文档
- 有人能解释一下这个“双重否定”的把戏吗?
- 如何更改单选按钮的颜色?
- 如何防止在表格单元格(不是单个单元格)的列中换行?