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

Question

是否可以使用键盘通过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" 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/

- JavaSheriff

---

我看到你在我回答后进行了编辑。你看到我的回答了吗？ - rybo111

晚了一点，但是...我认为现在我们只需要将role="menu"添加到ul.dropdown-menu中，将role="navigation"添加到div.navbar中（在bootstrap 2和3中都是如此），这似乎可以很好地实现键盘可访问性。但我认为你问题中的HTML标记不符合Bootstrap示例... - djKianoosh

Answer 1

更新

Bootstrap现在支持上/下箭头作为标准操作。

因此，如果您想使用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;
    }
});

请查看此JSFiddle演示。

- rybo111

---

首页/尾页和字母导航丢失 :-) - xamiro

@xamiro-dev 请查看更新的答案。你可以通过找到键码并添加一个switch case来添加字母导航。 - rybo111

Answer 2

很好的例子。

但是，你为什么要设置一个setTimeout？ 有特定的原因吗？

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

我做了一个相同的示例，模拟一个输入选择框，没有超时。看一下这个。

- nneeggrroo

---

很可能那时候是浏览器的一个小问题。 - rybo111

@Emzor 如果你有兴趣，该代码现在已更新。 - rybo111

@rybo111 非常感谢您提供的信息 :-) - Emzor