我正在按照 [此处][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
});
我希望我的用户能够使用键盘,使用向上键或向下键在选择之间导航,并使用回车键触发选择。任何想法我怎样才能做到这一点?非常感谢!
最佳答案
您需要绑定(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/
关于javascript - 如何使用 jQuery 在键盘上为 Div 列表启用箭头导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28147266/