Question

我发现了一段来自bootstrap的代码，我试图理解。不过，还有一部分我不能完全掌握。

<div class="modal fade" tabindex="-1" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Flexibilní mřížka</h4>
        </div>
        <div class="modal-body">
          <p>content</p>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Zavřít</button>
        </div>
      </div>
    </div>
    </div>

tabindex="-1"做了什么？

Answer 1

来自MDN

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation;
0 means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;
a positive value which means should be focusable and reachable via sequential keyboard navigation; its relative order is defined by the value of the attribute: the sequential follow the increasing number of the tabindex. If several elements share the same tabindex, their relative order follows their relative position in the document).

Answer 2

tabindex属性允许您在按键盘上的Tab键时按照您想要访问的顺序设置字段的顺序。

添加tabindex -1只是意味着“不要将此字段放在标签周期中”。因此，在按钮循环中永远不会突出显示或选择它。您仍然可以手动（使用光标）选择字段，但不能在选项卡循环中选择。

在HTML 4中，您可以仅将tabindex添加到表单元素中。但是，在HTML5中，您可以将其添加到div以及其他元素。

通常，当在tabindex中选择div时，您将看不到它。但是，通过添加一些CSS，它是可见的。

body         {background: gray}
.panel       {background: white; padding:10px}
.panel:focus {background: red}

<div class="panel" tabindex="1">Click on me first, then press tab</div>
<div class="panel" tabindex="3">Third</div>
<div class="panel" tabindex="4">Fourth</div>
<div class="panel" tabindex="-1">This div is excluded</div>
<div class="panel" tabindex="2">Second</div>

Answer 3

来自W3C WAI-ARIA 1.0 Authoring Practices。见 3.2.1部分。使用Tabindex管理小部件中的焦点

将tabindex值-1设置为元素使元素能够使用element.focus（）方法通过JavaScript接收焦点。此方法用于启用箭头键导航到元素。可以通过箭头键导航到的每个元素必须具有-1的tabindex才能使其获得焦点。

tab-index标签的含义

3 个答案: