如何使用 jQuery 在键盘上为 Div 列表启用箭头导航答案

【问题标题】：How do I enable arrow navigation on keyboard for a list of Div using jQuery如何使用 jQuery 在键盘上为 Div 列表启用箭头导航
【发布时间】：2015-01-26 09:13:08
【问题描述】：

我正在按照 [这里][1] 的教程制作 Facebook 之类的朋友标记系统。但是本教程缺少像 Facebook 这样的“箭头导航”功能。我想弄清楚如何实现这一目标。

基本上，当我在 contenteditable 区域输入文本时，它会生成推荐朋友的 div，如下所示：

<div class="display_box">    
   <img src="user_img/John.jpg">
   <a href="#" class="addname" title="John">John</a><br>
   <span>India</span>
</div>
<div class="display_box">    
   <img src="user_img/Peter.jpg">
   <a href="#" class="addname" title="Peter">Peter</a><br>
   <span>USA</span>
</div>
<div class="display_box">    
   <img src="user_img/Mary.jpg>
   <a href="#" class="addname" title="Mary">Mary</a><br>
   <span>UK</span>
</div>

它们都是类名为display_box 的div。我可以单击该框并通过以下方式选择它们：

$('div').on("click",".display_box",function(e) {
    // do the stuffs
});

我希望我的用户能够使用键盘，使用向上键或向下键在选择之间导航，并使用回车键触发选择。任何想法我怎样才能做到这一点？非常感谢！

【问题讨论】：

其实是一样的，只不过你用的不是click而是keypress或者keyup或者keydown，这样最合适。如果您希望在用户按下但不释放箭头键时连续滚动，请使用例如 keydown。下一步是在函数内部传递其他参数。查看此答案以找出键码 [stackoverflow.com/questions/2220196/…，然后在 google 上查找字符表以了解按下了哪个键。 GL 与您的项目！

标签： javascript jquery navigation tagging arrow-keys

【解决方案1】：

您需要绑定键盘事件keyup/keydown，然后相应地更改css以提供move up或move down的感觉：

如果你想要一个单一的移动，即使是在一个按键上，也可以使用keyup。

如果您想以循环方式移动，只要用户按住密钥，请使用 keydown。

$("#search").keyup(function(e) 
{
        if (e.keyCode == 40) 
        {  
            Navigate(1);
        }
        if(e.keyCode==38)
        {
            Navigate(-1);
        }

});

查看完整代码@fiddle：http://jsfiddle.net/MKZSE/77/

【讨论】：