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

Question

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

基本上，当我在内容可编辑区域输入文本时，它会生成建议的朋友的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
}); 

我希望我的用户能够使用键盘，使用向上键或向下键在选择之间导航，并使用 Enter 键触发选择。任何想法如何实现这一目标？非常感谢！

Answer 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/