Włączanie nawigacji po klawiaturze w rozwijanym menu Bootstrap

Question

Czy można nawigować za pomocą klawiatury w menu rozwijanym za pomocą Tab i nawigować za pomocą klawiszy strzałek do elementów podrzędnych menu rozwijanego?

Oto kod mam teraz:

<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/

Answer 1

Aktualizacja

Bootstrap obsługuje klawiszy góra/dół w standardzie.

Więc jeśli chcesz Tab aby uaktywnić listę rozwijaną, tylko get the key code (9) i wykonaj następujące czynności:

$('.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(); 
    } 
}); 

A jeśli chcesz dodać dalszą funkcjonalność, gdy użytkownik koncentruje się na liście rozwijanej pozycja menu:

$('.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; 
    } 
}); 

Zobacz wersję demonstracyjną: this JSFiddle.

Answer 2

Dobry przykład.

Ale, dlaczego ustawiłeś setTimeout? Jakiś konkretny powód?

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

Zrobiłem ten sam przykład, symulując pole wyboru wejścia, bez limitu czasu. Check this out.