javascript - 要素のシンプルな HTML5 キーボード ナビゲーション

Question

Web サイトにキーボード ナビゲーション (左矢印、右矢印、入力/選択スペース)を実装しようとしています。これにはいくつかjQuery必要になると思います！これが私が探しているもののアイデアです（最初の画像を参照）。「セクション」がある画像を使用して、現在の選択を強調表示できるようにしたいと考えています。

これを行う簡単な方法はありますか？

さらに、これを行う簡単な方法がある場合、次のように拡張するにはどうすればよいですか。

jQuery は私の領域ではありません。私はオンラインであらゆる場所を見てきましたが、Web サイトにキーボード コントロールを実装する簡単な方法を見つけるのは非常に難しいと感じています。リンクや提案をいただければ幸いです。

前もって感謝します。

Answer 1

jQuery からkeydownイベントを使用できます。実装方法を理解するのに役立つ簡単なフィドルを書きました。

$(function(){
    height = $('#myTable tr').length+1;    
    width = $('#myTable td').length;
    $.each($('#myTable td'), function(key, value){
        $(this).attr('id', key);
    });
});
$(document).keydown(function(e)
{    
   switch(e.which) {        
        case 37: // left
           move(1);
        break;
        case 38: // up
            move(2);
        break;
        case 39: // right
           move(3);
        break;          
        case 40: // down
           move(4);
        break;          
        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
}); 
function move(direction){
    var cur_id = parseInt($('.selected').attr('id'));
    switch(direction){
        case 1://left
           selectTd(cur_id-1);
            break;
        case 2://up
            selectTd(cur_id-height);
            break;
        case 3://right
            selectTd(cur_id+1);
            break;
        case 4://down
             selectTd(cur_id+height);
            break;

    }

}
function selectTd(id){
    if(id > (width-1) || id < 0) return alert("Out of bounds");
   $('.selected').removeClass('selected');  
   $('#'+id).addClass('selected');     
}

https://jsfiddle.net/z6gea722/