Twitter bootstrap 在引导下拉菜单中启用键盘导航
是否可以使用Tab键使用键盘导航到下拉菜单,并使用箭头键导航到下拉菜单的子元素 以下是我现在掌握的代码:Twitter bootstrap 在引导下拉菜单中启用键盘导航,twitter-bootstrap,accessibility,keyboard-navigation,Twitter Bootstrap,Accessibility,Keyboard Navigation,是否可以使用Tab键使用键盘导航到下拉菜单,并使用箭头键导航到下拉菜单的子元素 以下是我现在掌握的代码: <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" a
<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>
-
更新
引导现在标准支持向上/向下键
因此,如果您希望Tab激活下拉列表,只需(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;
}
});
有关演示,请参阅。很好的示例
但是,为什么要设置一个setTimeout
?
有什么具体原因吗
setTimeout(function(){
$(".search-option:first").focus();
},100);
我做了同样的例子,模拟了一个输入选择框,没有超时 我看到你在我回答后被编辑了。你看到我的答案了吗?迟来的评论,但是。。。我认为现在我们可以将role=“menu”添加到ul.dropdown-menu,将role=“navigation”添加到div.navbar(在bootstrap 2和3中),这似乎可以很好地实现键盘的可访问性。但我认为您问题中的html标记没有遵循引导示例…缺少主页/结尾和字母导航:-)@xamiro dev查看更新的答案。您可以通过和添加开关盒来添加字母导航。这可能是当时浏览器的一个怪癖。@Emzor如果您感兴趣,代码现在已经更新。@rybo111非常感谢您提供的信息:-)