Abilitazione della navigazione da tastiera nel menu a tendina Bootstrap

Question

È possibile navigare utilizzando la tastiera nel menu a discesa utilizzando Tab e navigare utilizzando i tasti freccia per gli elementi secondari del menu a discesa?

Ecco il codice che ho adesso:

<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

Aggiornamento

Bootstrap supporta ora su/giù come standard.

Quindi, se volete Tab per attivare il menu a discesa, appena get the key code (9) ed effettuare le seguenti operazioni:

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

E se si desidera aggiungere ulteriori funzionalità per quando l'utente si concentra su un menu a discesa voce di 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; 
    } 
}); 

Vedere this JSFiddle per una demo.

Answer 2

Bel esempio.

Ma, perché hai impostato uno setTimeout? Qualche ragione specifica?

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

Ho fatto lo stesso esempio, simulando una casella di selezione di input, senza un timeout. Check this out.