如何讓tab索引適用於下拉菜單？

我有一個包含引導程序下拉組件的標題，我試圖通過使用tabindex來啓用鍵盤導航到該元素。以下是HTML和簡單的CSS：如何讓tab索引適用於下拉菜單？

HTML: 
<span class="pull-right"> 
    <span class="help-menu dropdown"> 
     <span class="dropdown-toggle" data-toggle="dropdown" role="button"> 
      <span class="help-header" tab-index="0">Help</span> 
     </span> 
      <ul class="dropdown-menu pull-right" tabindex="-1" role="menu"> 
      <li tabindex="-1"><a [href]="/help.html" target="_blank">Docs</a></li> 
      </ul> 
    </span> 
</span>

CSS：

.help-header{ 
    &:after{ 
     content: "\25BE"; //caret should be displayed! 
    } 
} 
.help-menu{ 
    display: inline-block; 
    cursor: pointer; 
    background: aqua; 
    margin-top: 10px; 
    margin-right: 20px; 
}

這裏是小提琴link

現在，當我做了標籤幫助沒有得到焦點。但是，當我從幫助標題類中刪除tabindex，並將其應用於類右鍵拉伸的跨度或帶類幫助菜單和下拉的跨度時，幫助文本將焦點放在標籤上。儘管如此，這一點得到了關注，但我看不到在輸入或空格或向下箭頭時的下拉菜單。

我真的不知道如何使這項工作。我一直試圖弄清楚，但一段時間後我失敗了。

我在這裏是否缺少tabindex的核心概念。任何人都可以幫助我，或者指點我一個正確的方向。

非常感謝。

乾杯。

來源

2016-09-14 ShellZero

tabindex屬性明確定義了頁面內可聚焦元素（通常爲鏈接和表單控件）的導航順序。它也可以用來定義元素是否應該是可以聚焦的或者不是。

[Both] tabindex =「0」和tabindex =「 - 1」具有特殊含義並在HTML中提供不同的功能。值爲0表示元素應置於默認導航順序中。這允許不是本機可聚焦的元素（如<div>,<span>和 <p>）接收鍵盤焦點。當然，人們通常應該使用鏈接和表單控件來處理所有交互元素，但是這樣可以讓其他元素可以聚焦並觸發交互。

在tabIndex =「 - 1」值將刪除缺省導航流（即，用戶不能標籤的話）的元素，但它允許它接收方案重點，這意味着焦點可被設置爲它從一個鏈接或與腳本。**這可能非常有用的元素不應該標籤，但可能需要有焦點設置給他們。

一個很好的例子是一個模式對話框窗口 - 打開時，重點應集的對話框，屏幕閱讀器會開始閱讀和鍵盤將開始在對話框中進行導航。由於對話框（可能只是一個<div>元素）在默認情況下不可聚焦，因此在分配時，tabindex =「 - 1」允許在呈現時通過腳本將焦點設置爲它。

值-1也可以是複雜的部件和菜單，利用箭頭鍵或其他快捷鍵，以確保只有一個窗口小部件內元件是與通航tab鍵是有用的，但仍然允許焦點在小部件內的其他組件上設置。

因此，在總結，如果你想設置某些元素可以通過鍵盤Tab鍵，你應該值更改爲0 。

來源

2016-09-14 23:33:22

如何讓tab索引適用於下拉菜單？

回答

相關問題