Aktivierung der navigation mit der Tastatur in die Bootstrap-dropdown-Menü

Ist es möglich, die Navigation über die Tastatur, um die drop-down-Menü mit Tab, und navigieren Sie mithilfe der Pfeil-Tasten, um die sub-Elemente in der drop-down?

Hier ist der code den ich jetzt habe:

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

  • Ich sehe, du editiert, nachdem ich geantwortet. Hast du meine Antwort?
  • Verspäteter Kommentar, aber... ich denke, dass kann man heute nur hinzufügen role="menu" an der ul.dropdown-Menü und role="navigation" zu den div.navbar (in beiden bootstrap 2 und 3) und das scheint " enable keyboard accessibility ziemlich gut. Aber ich denke, dass das html-markup, die in Ihrer Frage nicht Folgen Sie den bootstrap Beispiele...
InformationsquelleAutor user648026 | 2013-07-18
  1. 12

    Update

    Bootstrap unterstützt nun die up/down-Tasten als standard.

    Also, wenn Sie wollen, Tab, um aktivieren Sie das dropdown-Menü nur Holen Sie sich den Schlüssel-code (9) und Folgendes tun:

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

    Und wenn Sie möchten, fügen Sie weitere Funktionen, wenn der Benutzer sich auf ein dropdown menu item:

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

    Sehen dieses JSFiddle für eine demo.

    • home/end-und Brief-navigation fehlt 🙂
    • Siehe aktualisierte Antwort. Sie können hinzufügen, Brief-navigation von Suche den keycode und das hinzufügen von ein switch case.
    InformationsquelleAutor rybo111
  2. 1

    Schönes Beispiel.

    Aber, Warum hast du ein setTimeout?
    Einem bestimmten Grund?

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

    Machte ich das gleiche Beispiel, die Simulation ein input-Feld auswählen, ohne ein Zeitlimit. Check this out.

    • Es ist wahrscheinlich, es war eine Eigenart des Browsers zu der Zeit.
    • Der code wurde jetzt aktualisiert, wenn Sie interessiert sind.
    • Vielen Dank für die info 🙂
    InformationsquelleAutor nneeggrroo
Schreibe einen Kommentar