用jQuery添加键盘导航
[英]adding keyboard navigation with jquery
问题描述
我构建了一个复杂的jquery-html游戏，并多次使用click事件。 为了使其可访问，我需要进行键盘导航...是否有任何jquery插件或任何使所有click事件也可以与Enter键一起工作的方法？ 例如：
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
<style>p:focus {
outline: 1px solid grey;
}</style>
</head>
<body>
<p tabindex="1">Par1</p>
<p tabindex="2">Par2</p>
</body>
</html>
如果我在关注段落时按Enter键，那么什么也不会发生...我想创建键盘事件并检测Enter键，但这将非常繁琐...任何解决方案？
3 个解决方案
解决方案1
4 已采纳 2013-12-17 13:22:33
您需要使用http://api.jquery.com/keydown/来捕获关键事件，像这样
$( "#target" ).keydown(function( event ) {
switch(event.which)
{
case 37 : //Arrow left
break;
case 39 : //Arrow left
break;
case 38 : //Arrow up
break;
case 40 : //Arrow down
break;
}
});
解决方案2
1 2014-04-02 13:15:41
除了与指针设备相关联之外，click事件类型还必须作为元素激活的一部分进行调度
这意味着，例如，如果激活了链接，则将触发click事件。 因此，您可以将<p tabindex="1">…</p>替换为<a href="#" tabindex="1">…</a>并阻止默认操作。 当然，这不一定比任何其他建议都简单。
解决方案3
0 2014-01-30 15:10:42
您可以在添加类时使用虚拟焦点。 可以应用于任何事件（鼠标或键盘）。
一点灵感如何运作
$( "#target" ).keydown(function( event ) {
switch(event.which)
{
case 37 : //Arrow left
break;
case 39 : //Arrow left
break;
case 38 : //Arrow up
break;
case 40 : //Arrow down
break;
case 13 : //Enter
break;
// next keys....
}
});
http://jsfiddle.net/jirkaz/HA4m3/
使用键盘移动活动类（箭头），然后按Enter键在活动div中获取文本。
将键盘导航添加到幻灯片
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.