Javascript 元素的简单HTML5键盘导航

我正在尝试实现一些键盘导航箭头左，右和输入/空间选择进入我的网站。我猜这需要一些jQuery！这是我要找的东西的一个想法，请看第一张图片。我希望能够在“部分”所在的位置使用图像，并突出显示当前选择

有没有一个简单的方法可以做到这一点

此外，如果有一种简单的方法，我将如何将其扩展到以下内容：

jQuery根本不是我的领域。我在网上到处寻找，我发现很难找到一种简单的方法在我的网站上实现键盘控制。任何链接或建议将不胜感激

---

提前谢谢

您可以这样做，只需将您想要的代码添加到下面的

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

您可以在这个fiddle中查看一个示例：

您可以使用jQuery中的keydown事件，我编写了一个简单的fiddle来帮助您理解如何实现它，我希望它能帮助您：

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

---

您可以使用库检查一种更健壮的键盘导航处理方式。As tab键可帮助您在完成页面导航后浏览模式并失去焦点。shift+tab有助于反向导航，但您仍然无法根据屏幕上覆盖的元素控制导航

包括naviBoard库。 在所需项目上使用类navigable。 使用parentID作为所有可导航元素的父元素的id初始化naviBoard.setNavigationparentID方法。 您可以通过下面的JSFIDLE来完成此演示：

---

哇，谢谢你的快速回复。我检查了JSFIDLE，但我不知道如何实现它。。我不想让你给我解释清楚。你有什么办法可以举个例子吗？你不能让小提琴工作吗？只需按左键、右键或下键，否则你不知道如何使用我给你的密码，如果是这样，我很乐意帮助你，聊天吗？@Kaido是的，我把它从小提琴中删除了，我把它保留在答案中，因为据我所知，他不想让它做任何事情，但也许我错了：P，感谢您的误解。@Shocklo谢谢，但不必提及我，对于答案一点帮助都没有，只是为了格式：——@kaido我如何使突出显示的区域可点击？？我希望能够使用“回车”键打开url。这就成功了！非常感谢各位，我只是需要多一点解释。问题解决了！：D我将自己完成第二部分，并尝试在第二天或第二天将结果发布在这里。完整的回答很好：如果任何人都能详细说明第二部分的代码，我将永远感激你，并为你建造许多教堂。