是否可以使用键盘导航到使用Tab的下拉菜单，并使用箭头键导航到下拉菜单的子元素？在Bootstrap下拉菜单中启用键盘导航

这里是我现在的代码：

<input type="text" value="click tab to jump to the drop down."/> 
<div class="bs-docs-example"> 
    <div class="dropdown clearfix"> 
     <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"> 
     <li><a tabindex="-1" href="#">Menu Item A</a></li> 
     <li><a tabindex="-1" href="#">Menu Item B</a></li> 
     <li><a tabindex="-1" href="#">Menu Item C</a></li> 
     <li class="divider"></li> 
     <li><a tabindex="-1" href="#">Menu Item A1</a></li> 
      <li class="dropdown-submenu"> 
       <a tabindex="-1" href="#">Menu Item B1</a> 
       <ul class="dropdown-menu"> 
        <li><a tabindex="-1" href="#">You should navigate here with the keyboard.</a></li> 
        <li><a tabindex="-1" href="#">Thanks For your Help!</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div>

http://jsfiddle.net/MGwVM/1/

来源

2013-07-18 user648026

我看到你编辑后，我回答。你有没有看到我的答案？ – rybo111

最新评论，但...我认为现在我们可以添加角色=“菜单”的ul.dropdown菜单和角色=“导航”到div.navbar（在引导2和3），似乎启用键盘辅助功能非常好。但我认为你的问题的HTML标记不遵循引导示例... – djKianoosh

更新

引导现在支持上/下键为标准。

所以，如果你想标签激活下拉列表中，只是get the key code（9），然后执行以下操作：

$('.input-group input').keydown(function(e){ 
    if(e.which == 9){ // tab 
     e.preventDefault(); 
     $(this).parent().find('.dropdown-toggle').click(); 
     $(this).parent().find('.dropdown-menu a:first').focus(); 
    } 
});

如果你想在用户集中在一个下拉菜单为添加更多功能菜单项：

$('.dropdown-menu a').keydown(function(e){ 
    switch(e.which){ 
     case 36: // home 
      e.preventDefault(); 
      $(this).closest('.dropdown-menu').find('a:first').focus(); 
      break; 
     case 35: // end 
      e.preventDefault(); 
      $(this).closest('.dropdown-menu').find('a:last').focus(); 
      break; 
    } 
});

请参阅this JSFiddle进行演示。

来源

2013-07-27 11:02:08 rybo111

主页/结束和信件导航丢失:-) – xamiro

@ xamiro-dev查看更新的答案。您可以通过[查找键码]（http://keycode.info）并添加开关盒添加字母导航。 – rybo111

不错的例子。

但是，为什么设置了setTimeout？一些具体原因？

setTimeout(function(){ 
    $(".search-option:first").focus(); 
},100);

我做了同样的例子，模拟输入选择框，没有超时。 Check this out。

来源

2014-09-24 18:40:40 nneeggrroo

这可能是当时浏览器的怪癖。 – rybo111

@Emzor如果您有兴趣，代码现在已更新。 – rybo111

@ rybo111非常感谢信息:-) – Emzor

在Bootstrap下拉菜单中启用键盘导航

回答

更新

相关问题