tab-index标记的含义

我从bootstrap中找到了一段代码，我试图理解它。尽管如此，还有一部分我没有完全得到。tab-index标记的含义

<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"是做什么用的？

来源

2015-10-13 nous3k

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>

来源

2015-10-13 13:45:37

但即使当我将模式的tabindex设置为“1”时，它不能用TAB键进行调焦。为什么？ – nous3k

提供示例代码 –

'这是来自bootstrap文档。为什么tab-index =“ - 1”在这里设置，即使tab-index =“1或0”仍然不可调焦？我没有看到在这里使用它的目的.. @Wes Foster – nous3k

从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).

来源

2015-10-13 13:45:39

从W3C WAI-ARIA 1.0 Authoring Practices。参见章节3.2.1。使用TABINDEX到窗口小部件

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

来源

2015-10-13 13:46:42 krlzlx

tab-index标记的含义

回答

相关问题