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標記的含義

回答

相關問題