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

Question

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

基本上，当我在 contenteditable 区域输入文本时，它会生成如下所示的推荐 friend 的 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
}); 

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

Answer 1

您需要绑定(bind)键盘事件 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/