bootstrap 中的 tabindex="-1" 是什么意思

What's the tabindex="-1" in bootstrap for

Bootstrap 3 中的 tabindex 属性有什么用?

尽管它们几乎在所有模态中都使用它们,但其文档并未提及任何内容。

我只找到这个关于它的用途,并没有真正说明什么

Accessible tooltips for keyboard and assistive technology users

For users navigating with a keyboard, and in particular users of assistive technologies, you should only add tooltips to keyboard-focusable elements such as links, form controls, or any arbitrary element with a tabindex="0" attribute.

然后我发现 I can't press esc to hide a modal if the tabindex attribute is not -1

The tabindex attribute explicitly defines the navigation order for focusable elements (typically links and form controls) within a page. It can also be used to define whether elements should be focusable or not.

[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.

A tabindex="-1" value removes the element from the default navigation flow (i.e., a user cannot tab to it), but it allows it to receive programmatic focus, meaning focus can be set to it from a link or with scripting.** This can be very useful for elements that should not be tabbed to, but that may need to have focus set to them.

A good example is a modal dialog window - when opened, focus should be set to the dialog so a screen reader will begin reading and the keyboard will begin navigating within the dialog. Because the dialog (probably just a <div> element) is not focusable by default, assigning it tabindex="-1" allows focus to be set to it with scripting when it is presented.

A value of -1 can also be useful in complex widgets and menus that utilize arrow keys or other shortcut keys 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

这就是为什么您需要在模式 <div>tabindex="-1",以便用户可以访问常用的鼠标和键盘快捷键。希望对您有所帮助。

tabindex 属性 与 HTML 关联,并不特定于 Bootstrap。

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

您需要注意三种不同的情况:

  1. 当向元素添加 tabindex = "0" 时,这意味着它可以通过键盘导航到达,但 顺序由文档源顺序定义。

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

  3. 向tabindex添加一个负值时(通常是tabindex="-1")表示该元素无法通过键盘访问导航,但可以使用 JS 中的焦点功能聚焦。