Navigationsmenüs mit Tastatur in Javascript

Question

Ich habe eine Tabelle in HTML mit Twitter Bootstraps.

Wenn ich auf die Tabelle Javascript klicke, bekomme ich eine ID und fülle ein Modal mit Informationen. Etwas wie folgt aus:

$('.table > tbody > tr').click(function() { 
    //lots of things happens 
}); 

---

<div class="modal fade"> 
     <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <!-- lots of information loaded with AJAX ---> 
      </div> 
     </div> 
    </div> 

Dies funktioniert gut, jedoch möchte ich in der Lage sein, nicht nur zu klicken, sondern mit den Tasten (nach unten drücken Taste navigieren würde gehen und Taste drücken würde ein rauf).

Irgendwelche Vorschläge würden geschätzt.

Answer 1

Sie würden die Tasteneingaben im gesamten Dokument erfassen und ändern, was Sie brauchen, hier ist eine grundlegende Vorlage für die Pfeiltasten. Wenn Sie andere Tasten hier benötigen eine nützliche Seite ist, sie zu bekommen http://keycode.info/

document.onkeydown = checkKey; 

function checkKey(e) { 

    e = e || window.event; 

    if (e.keyCode == '38') { 
     // up arrow 
    } 
    else if (e.keyCode == '40') { 
     // down arrow 
    } 
    else if (e.keyCode == '37') { 
     // left arrow 
    } 
    else if (e.keyCode == '39') { 
     // right arrow 
    } 

} 

Answer 2

Zuerst Sie Ihren Code mit der Funktion wickeln müssen und rufen Sie es von Ihrem Click-Handler:

var $table = $('.table'), 
    $tableRows = $table.find('tbody > tr'); 

$tableRows.click(function() { 
    rowToModal($(this)); 
}); 

function rowToModal($row) { 
    $tableRows.removeClass('active-row'); 
    $row.addClass('active-row'); 

    //lots of things happens 
} 

Dann können Sie machen Handler für "keydown" Ereignis:

$(document).on('keydown', function(e) { 
    if (/*check if modal is currently open*/) { 
     var $currentRow = $($table.find('.active-row')), 
      $nextRow; 

     if (e.key == 'ArrowDown') { 
      $nextRow = $currentRow.next(); 
     } else if (e.key == 'ArrowUp') { 
      $nextRow = $currentRow.prev(); 
     } 

     if ($nextRow && $nextRow.length) { 
      rowToModal($nextRow); 
     } 
    } 
});