Включение навигации с помощью клавиатуры в раскрывающемся меню 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/

Источник

2 ответа

Решение

Обновить

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 для демонстрации.

Источник

Хороший пример.

Но, почему вы установили setTimeout? Какая-то конкретная причина?

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

Я сделал тот же пример, имитируя поле выбора ввода без тайм-аута. Проверьте это.

Источник
Другие вопросы по тегам