在HTML中tabindex属性的用途是什么?
当前回答
通过控件的标签通常在控件出现在HTML代码中时按顺序发生。
使用tabindex,制表符将按照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>
它可用于更改默认的表单元素焦点导航序列。
如果你有:
text input A
text input B
submit button C
通过使用tab键,您可以通过A->B->C进行导航。Tabindex允许你改变这个流程。
HTML tabindex属性负责指示一个元素是否可以通过键盘导航访问。 当用户按Tab键时,焦点从一个元素转移到另一个元素。通过使用tabindex属性,制表符顺序流被移位。
当用户按下tab按钮时,用户将按如下示例所示的顺序依次进入表单。
例如:
Name: <input name="name" tabindex="1" />
Age: <input name="age" tabindex="3" />
Email: <input name="email" tabindex="2" />
控制页内标签的顺序(按tab键移动焦点)。
参考:http://www.w3.org/TR/html401/interact/forms.html # h-17.11.1
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击