首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >引导程序中的tabindex="-1“用于什么?

引导程序中的tabindex="-1“用于什么?
EN

Stack Overflow用户
提问于 2015-10-02 16:07:30
回答 2查看 127.2K关注 0票数 120

Bootstrap 3中的tabindex属性是干什么的?

它的文档并没有提到任何关于它们的信息,尽管它们实际上在所有的模态中都使用它们。

我只发现这是关于它的使用,这并不能说明什么

用于键盘和辅助技术用户的可访问工具提示 对于使用键盘导航的用户,特别是使用辅助技术的用户,您应该只向可用于键盘的元素添加工具提示,例如链接、表单控件或任何具有tabindex="0“属性的任意元素。

我发现了-1

  • 键(带有表索引)
  • 键(没有表索引)
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-10-02 17:01:33

tabindex属性显式地定义了页面中可聚焦元素(通常是链接和表单控件)的导航顺序。它也可以用来定义元素是否应该是可聚焦的。 tabindex="0"tabindex="-1"都有其特殊的含义,并在HTML中提供了不同的功能。值0表示元素应按默认导航顺序放置。这允许本机不可聚焦的元素(如<div><span><p>)接收键盘焦点。当然,通常应该对所有交互元素使用链接和表单控件,但这确实允许其他元素具有可聚焦性并触发交互。 tabindex="-1"从默认导航流中移除元素(即用户不能向其选项卡),但允许它接收编程焦点,这意味着焦点可以从链接或脚本中设置到它。**对于不应该被标签到但可能需要将焦点设置为的元素来说,非常有用。 一个很好的例子是模式对话框窗口-当打开时,焦点应该设置到对话框上,这样屏幕阅读器将开始读取,而键盘将开始在对话框中导航。由于对话框(可能只是一个<div>元素)在默认情况下是不可聚焦的,所以当它出现时,为它分配tabindex="-1"允许使用脚本将焦点设置到它。 -1的值在使用箭头键或其他快捷键的复杂小部件和菜单中也很有用,以确保小部件中只有一个元素可以使用选项卡键导航,但仍然允许将焦点设置在小部件内的其他组件上。

资料来源: http://webaim.org/techniques/keyboard/tabindex

这就是为什么您需要模态tabindex="-1"上的<div>,这样用户就可以访问普通的鼠标和键盘快捷键。希望这能有所帮助。

票数 206
EN

Stack Overflow用户

发布于 2018-05-04 09:18:56

表索引属性与HTML相关联,它不特定于引导。

此属性负责指示是否可通过键盘导航访问元素。

您需要注意三种不同的场景:

  1. 当将tabindex = "0"添加到元素中时,这意味着它可以通过键盘导航访问,但是由文档源订单定义的。
  2. 当向tabindex属性(例如tabindex = "1", tabindex = "2")添加一个正值时,这些元素可以通过键盘导航访问,而order 是由属性值定义的。
  3. 当将负值添加到表索引(通常为tabindex="-1")中时,意味着该元素在键盘导航中不可访问,但可以使用JS.中的focus函数聚焦。
票数 24
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/32911355

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档