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

Question

我正在按照 [此处][1] 的教程制作一个类似 Facebook 的朋友标记系统。但是该教程缺少像 Facebook 这样的 "arrow navigating" 功能。我想弄清楚如何实现这一目标。

基本上，当我在 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>

它们都是 class 名称 display_box 的 div。我可以通过以下方式单击该框并 select 它们：

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

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

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/

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

How do I enable arrow navigation on keyboard for a list of Div using jQuery

javascript

navigation

jquery

tagging

arrow-keys