Javascriptのキーボードを使用したナビゲート可能なメニュー

Question

私は、Twitterのブートストラップを持つHTMLテーブルを持っています。

私がテーブルをクリックすると、javascriptがIDを取得し、情報でModalを埋めます。このような何か：これは正常に動作します

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

は、しかし、私はクリックして、しかし、ボタンが（希望下がるだろうキーを押し、キーを押しながら移動するだけでなく、できるようにしたいです行を上に）。

何か提案がありがとうございます。

Answer 1

文書全体の重要な入力をキャプチャし、必要なものを自由に変更できます。矢印キーの基本テンプレートはここにあります。あなたが他のキーが必要な場合は、ここでは、関数を使用してコードをラップし、あなたのクリックハンドラからそれを呼び出す必要があり、それらを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

ファーストを取得するための便利なサイトです。次に

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 
} 

は、あなたが作ることができます「keydown」イベントのハンドラ：

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