元素的简单 HTML5 键盘导航

Question

I'm trying to implement some keyboard navigation (arrows left , right & enter/space to select) into my website. I'm guessing some jQuery will be required for this! Here's an idea of what I'm looking for (see first image). I want to be able to use images where the 'sections' are and have the current selection highlighted.

Is there a simple way of doing this?

Furthermore, if there is a simple way of doing this, how would I expand it to the following:

jQuery is not my area at all. I've looked everywhere online and I'm finding it extremely hard to find a simple way of implementing keyboard controls into my website. Any links or suggestions would be greatly appreciated!

Thanks in advance.

Answer 1

you can do it, just add the code that you want to the following

  $(document).keydown(function(e) {
      switch(e.which) {
          case 37: // left
              moveInSectorToLeft();
          break;

         case 38: // up
             nothing(); //Dont know if you want to use it
         break;

         case 39: // right
             moveInSectorToRight();
         break;

         case 40: // down
             selectCurrentSection();
         break;

         default: return; 
     }
     e.preventDefault(); 
  });

you can check an example in this fiddle : https://jsfiddle.net/ew8Lnt83/

Answer 2

You can use the keydown event from jQuery, I wrote a simple fiddle to help you understand how to implement it, I hope it helps:

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

Answer 3

You can check a more robust way of keyboard navigation handling with https://github.com/amanboss9/naviboard library. As tab key helps you to navigate through a pattern and lose focus once you are done with the page navigation. shift + tab helps in reverse navigation but still you have no control over the navigation according to the element overlaying on the screen.

• Include naviBoard library. https://cdn.jsdelivr.net/npm/naviboard@4.1.0/dist/naviboard.min.js
• Use class navigable on the desired items.
• Initialize the naviBoard.setNavigation(parentID) method with parentID as the id of the parent element of all navigable elements.

You can go through the demo of this by below jsfiddle: https://jsfiddle.net/amanboss9/unf94tjo/3/embedded/result/