Bật điều hướng bàn phím trong menu thả xuống Bootstrap

Question

Có thể điều hướng bằng cách sử dụng bàn phím đến trình đơn thả xuống bằng cách sử dụng Tab và điều hướng bằng các phím mũi tên đến các phần tử con của trình đơn thả xuống không?

Dưới đây là đoạn code tôi có bây giờ:

<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

Cập nhật

Bootstrap bây giờ hỗ trợ lên/xuống phím như là tiêu chuẩn.

Vì vậy, nếu bạn muốn Tab để kích hoạt menu thả xuống, chỉ get the key code (9) và làm như sau:

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

Và nếu bạn muốn thêm chức năng hơn nữa cho khi người dùng tập trung vào một danh sách thả xuống mục 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; 
    } 
}); 

Xem this JSFiddle cho bản trình diễn.

Answer 2

Ví dụ hay.

Nhưng, Tại sao bạn đặt setTimeout? Một số lý do cụ thể?

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

Tôi đã làm ví dụ tương tự, mô phỏng hộp chọn đầu vào, không hết thời gian chờ. Check this out.