如何在键盘上启用箭头导航以获取使用jQuery的Div列表 [英] How do I enable arrow navigation on keyboard for a list of Div using jQuery

问题描述

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

I am following a tutorial [here][1] to make a Facebook like friend tagging system. But the tutorial lacks the "arrow navigating" capability like Facebook. I would like to figure out how to achieve this.

基本上，当我在可信区域输入文本时，它会生成如下建议朋友的div：

Basically, when I input text on the contenteditable area, it will generate divs of suggested friends like the following:

<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。我可以单击该框并选择它们：

They are all divs with the class name display_box. I can click on the box and select them by:

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

我希望我的用户能够使用键盘，使用按键向上或按键在选项之间导航，并使用回车键来触发选择。任何想法我怎么能实现这一点？非常感谢！

I would like my users to be able to use the keyboard, using key up or key down to navigate between the selections, and use the enter key to trigger the selection. Any ideas how can I make this happen? Many thanks!

推荐答案

你需要绑定键盘事件 keyup / keydown 然后相应地更改css以感觉向上移动或向下移动：

You need to bind keyboard events keyup/keydown and then change the css accordingly to give a feel of move up or move down :

使用 keyup 如果你想要一次移动在关键的新闻界，无论是谁y被长按。

use keyup if you want a single move even on a key press no matter the key is long pressed.

如果你想以循环方式移动，只要用户持有，就可以使用 keydown 密钥。

use keydown if you want to move in a cycle fashion as long as user holds the key.

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

});

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

Check complete code @fiddle: http://jsfiddle.net/MKZSE/77/

这篇关于如何在键盘上启用箭头导航以获取使用jQuery的Div列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！