2

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

在此处输入图像描述

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

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

在此处输入图像描述

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

提前致谢。

4

3 回答 3

5

你可以做到，只需将你想要的代码添加到以下

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

你可以在这个小提琴中查看一个例子：https ://jsfiddle.net/ew8Lnt83/

于 2015-10-08T01:51:44.310 回答
3

你可以使用 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');     
}

https://jsfiddle.net/z6gea722/

于 2015-10-08T02:31:11.283 回答
1

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

您可以通过下面的 jsfiddle 浏览此演示： https ://jsfiddle.net/amanboss9/unf94tjo/3/embedded/result/

于 2018-07-09T11:23:02.410 回答