Javascript 使用jquery进行菜单的键盘导航_Javascript_Jquery_Keyboard Navigation

Javascript 使用jquery进行菜单的键盘导航

javascript jquery

Javascript 使用jquery进行菜单的键盘导航,javascript,jquery,keyboard-navigation,Javascript,Jquery,Keyboard Navigation,我正在尝试将键盘导航添加到菜单（基于ul li） )，我已将keydown事件绑定到菜单（还是应该将keydown绑定到文档？）下面给出了所使用的处理函数 KeyDown: function(e) { var toFocus = false; if (e.keyCode == 38) { toFocus = $((e.target/* li */).next()[0]); }

我正在尝试将键盘导航添加到菜单（基于ul li） )，我已将keydown事件绑定到菜单（还是应该将keydown绑定到文档？）

下面给出了所使用的处理函数

 KeyDown: function(e) {        

    var toFocus = false;


                  if (e.keyCode == 38) {
         toFocus = $((e.target/* li */).next()[0]);
      }
                          if (e.keyCode == 40) {
         toFocus = $((e.target).next()[1]);
      }
    if (toFocus) {
        $(e.target).attr('tabIndex', '-1');
        $(toFocus).attr('tabIndex', '0');
        toFocus.focus();
        return false;
        }
        }

这里我得到了e.target作为html而不是li

你能推荐其他方法来添加键盘导航吗？

我只是想知道，与其自己做，为什么不使用已经存在的插件呢

演示

我的演示：只需添加一个示例

尝试使用“自定义”属性来按住选项卡ID的上下键

...KeyDown: function(e) {
    var Direction;
    if (e.keyCode == 38)
         Direction = "toUp";
    else Direction = "toDown";

    var Focus = $("li[tabid=\""$(e.target.id).attr(Direction)"\"]");
    Focus.focus();
}

---

<li ... tabid="1" toUp="-1" toDown= "2" />
<li ... tabid="2" toUp= "1" toDown= "3" />
<li ... tabid="3" toUp= "2" toDown= "4" />
<li ... tabid="4" toUp= "3" toDown="-1" />

…按键：功能（e）{
var方向；
如果（e.keyCode==38）
Direction=“toUp”；
else Direction=“toDown”；
var Focus=$（“li[tabid=\”“$（e.target.id）.attr（Direction）”\”）；
Focus.Focus（）；
}
---

上面的代码只是为了展示这个想法，现在已经很晚了，我没有时间测试它。所以请不要因为我不工作而投票否决我

希望对你有所帮助

<body>
    <input type="text" id="target-box" >
    <ul class="list">
        <li class="selected">Hello</li>
        <li>World</li>
    </ul>
</body>

CSS

我觉得这个插件很复杂，我只需要将焦点设置到我的菜单上，然后让e.target返回当前的菜单项你在开玩笑吧？复杂的？伴侣。。。请看我自己的例子，告诉我这是什么复杂的事情！：-）Thanx对于演示，顺便说一句，我的意思是插件的使用很复杂，插件复杂地计算x y位置n个东西，我上面提到的代码工作唯一的问题是它返回了html作为event.target，我只需要找到当前的li，它以一种更干净的方式关注您所做的所有代码行，并且它对于将来的更新比查看您的代码要好得多；）-使用一行代码，您可以在导航中完成所有操作（初始化行），其余的只是动画，向您展示一些不错的效果。底线是，为什么要重新发明轮子？代码重用是我们作为开发人员首先应该做的事情。（带a）

$(document).on('focus','#target-box', function() {
    var target_box = $(this);

    $(document).on('keyup', function(e) {

        if(e.which == 38){ // up arrow
            var selected_item = $('.selected');
            if(typeof selected_item.prev()[0] !== 'undefined') {
                selected_item.prev().addClass('selected');
                selected_item.removeClass('selected');
            }
        } else if (e.which == 40) { // down arrow
            var selected_item = $('.selected');
            if (typeof selected_item.next()[0] !== 'undefined') {
                selected_item.next().addClass('selected');
                selected_item.removeClass('selected');
            }
        }

        if (e.keyCode == 13) { // enter
            target_box.val($('.selected').html());
        }
    });
});

.selected {
    width : 50px;
    background-color: gray;
}