Bootstrap 中的 tabindex = “-1”是什么

引导3中的 tabindex属性是用来做什么的？

它的文档没有提到任何关于它们的内容，尽管它们实际上在所有情态动词中都使用它们。

我只找到了这个，关于它的用途，这并不能说明什么

键盘和辅具用户可使用的工具提示

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

我发现了 如果 ABC1属性不是 ABC2，我就不能按 esc来隐藏模态。

127499 次浏览
小开
最佳答案

tabindex属性显式地定义了页面中可定焦元素(通常是链接和表单控件)的导航顺序。它还可以用来定义元素是否应该可定焦。

[Both] tabindex="0" and tabindex="-1" have special meaning and provide distinct functionality in HTML. A value of 0 indicates that the element should be placed in the default navigation order. This allows elements that are not natively focusable (such as <div>, <span>, and <p>) to receive keyboard focus. Of course one should generally use links and form controls for all interactive elements, but this does allow other elements to be focusable and trigger interaction.

tabindex="-1"值为 从默认导航流中移除元素(也就是说，用户不能选项卡到它) ，但它是 允许它接收编程焦点，这意味着可以通过链接或脚本将焦点设置到它。这可以非常 对于不应选项卡式的元素很有用，但可能需要将焦点设置为这些元素。

一个很好的例子是 模态对话框窗口模态对话框窗口-当打开，焦点应该设置为对话框，这样屏幕阅读器将开始 阅读和键盘将开始 导航内的对话框。因为对话框(可能只是一个 <div>元素)在默认情况下是不可调焦的，所以将它分配给 tabindex="-1"允许在显示对话框时使用脚本将焦点设置为它。

A value of -1 can also be useful in complex widgets and menus that utilize arrow keys or 其他快捷键 to ensure that only one element within the widget is navigable with the tab key, but still allow focus to be set on other components within the widget.

来源: 《 http://webaim.org/techniques/keyboard/tabindex 》

这就是为什么你需要 tabindex="-1"对模式 <div>，使用户可以访问常见的鼠标和键盘快捷方式。希望能帮上忙。

小开

Tabindex属性 与 HTML 相关联，它不是特定于 Bootstrap 的。

此属性负责指示键盘导航是否可到达元素。

You need to look out for three different scenarios:

  1. When adding tabindex = "0" to an element this means it is reachable by the keyboard navigation but 订单由文档源订单定义。

  2. 当 增加一个正值到 tabindex 属性(例如 tabindex = "1", tabindex = "2")时，可以通过键盘导航和顺序 由属性的值定义。来访问这些元素

  3. 当 增加一个负值到 tabindex (通常是 tabindex="-1")时，表示元素是 键盘导航无法到达，但可以使用 JS 中的聚焦功能进行聚焦。


提交答案