logo标签列表

使用jQuery实现菜单的键盘导航

javascriptjquerykeyboard-navigation
3

我正在尝试为菜单（基于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元素？

您能否建议其他添加键盘导航的方法？

在类似的问题上有答案。（附带一个可工作的jsfiddle） - Benjamin Crouzier
3个回答
1
尝试使用自定义属性来保存向上和向下的tabid。
...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" />

以上代码只是为了展示想法，现在已经很晚了，我没有时间进行测试。所以请不要因为它不能工作而投票给我负评。
希望这有所帮助。
1
1
如果插件很复杂，我只需要将焦点设置到我的菜单，并获取e.target以返回当前菜单项。 - ravikiran
你开玩笑吧？复杂？哥们...看看我的例子，告诉我这到底有多复杂！:-) - balexandre
感谢演示，顺便说一句，我的意思不是插件的使用复杂，而是插件对于 x y 位置等复杂计算。我上面提到的代码是有效的，唯一的问题是它返回了事件目标的 HTML，我只需要找到当前具有焦点的 li 即可。 - ravikiran
你可以以更清晰的方式编写所有这些行代码，对于未来的更新来说会更好，而不是仅看着你的代码；只需一行代码即可在导航中完成所有操作（init行），其余代码只是为了展示一些漂亮的效果。 - balexandre
底线是，为什么要试图重新发明轮子？作为开发人员，我们应该首先做的就是代码重用。 - balexandre
0

HTML

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

jQuery

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

CSS

.selected {
    width : 50px;
    background-color: gray;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接