javascript 使用键盘箭头选择和选择 div 元素并输入键？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15603617/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Choose and select div elements with keyboard arrows and enter keys?
提问by Dave
Is there any way of navigating through a grid of div elements by pressing the arrow keys on the keyboard, and "clicking" the selected div by pressing enter key? I know that I should at least try to make this work somehow but I'm completely clueless as for how to make this happen, and if it's even possible.
有没有办法通过按键盘上的箭头键在 div 元素的网格中导航，然后按 Enter 键“单击”选定的 div？我知道我至少应该尝试以某种方式完成这项工作，但我完全不知道如何做到这一点，如果可能的话。
I'm aware of that the following will be invalid if not using the mouse, so what can I do to show some kind of "focus" on a specific div?
我知道如果不使用鼠标，以下内容将无效，那么我该怎么做才能在特定 div 上显示某种“焦点”？
.show:hover{
width:94px;
height:94px;
border:3px solid black;
}
.lock{
pointer-events:none;
}
Any hints of where to start? My game's here: http://jsfiddle.net/94jerdaw/WXEes/
从哪里开始的任何提示？我的游戏在这里：http: //jsfiddle.net/94jerdaw/WXEes/
EDIT:
编辑：
Is it possible to navigate the div field as it is, going "up" from the current position or will i have to make a case for every div as an originating point accompanied by every div it should go to in up/down/left/right events?
是否可以按原样导航 div 字段，从当前位置“向上”，或者我是否必须将每个 div 作为起始点，并伴随它应该在向上/向下/向左移动的每个 div/正确的事件？
回答by hyde
hope your question is still interesting to you. I had some time and I always want to have my own memory game. So I started building your desired functions, for full code see the Fiddle. Because of the fiddle frame you have to click once on the game.
希望你的问题对你来说仍然很有趣。我有一些时间，我一直想拥有自己的记忆游戏。所以我开始构建你想要的函数，完整的代码见Fiddle。由于小提琴框架，您必须在游戏中单击一次。
Edit:Sorry there is some trash code in my script, because I forked one of my own basic setups for plugins, will remove it later.
编辑：对不起，我的脚本中有一些垃圾代码，因为我分叉了我自己的插件基本设置之一，稍后将其删除。
It is not finished yet, but today I will finish it. I builded it as a plugin, because later on I want to add some options. But the idea of key movement should be clear.
它还没有完成，但今天我会完成它。我将它构建为插件，因为稍后我想添加一些选项。但关键运动的想法应该是明确的。
I created a Map-Object (You can also use an array, easier I think) for finding positions.
我创建了一个地图对象（你也可以使用数组，我认为更容易）来查找位置。
Too much code to post it all here, so here a snippet:
代码太多无法全部贴在这里，所以这里是一个片段：
$(window).keydown(function (e) {
//Initial set first card as selected
var actCard, nextCard;
if ($('.cardset').find('.selected').length < 1) {
$('#card1').addClass('selected');
} else {
switch (e.which) {
case 37: // left
$('.cardset').find('.selected').cardMoveHorizont('prev', cardMap);
break;
case 38: // up
$('.cardset').find('.selected').cardMoveHorizont('up', cardMap);
break;
case 39: // right
$('.cardset').find('.selected').cardMoveHorizont('next', cardMap);
break;
case 40: // down
$('.cardset').find('.selected').cardMoveHorizont('down', cardMap);
break;
default:
return; // exit this handler for other keys
}
e.preventDefault();
}
});
回答by kodisha
You need to bind event listeners for arrow keys and enter, it can be done easily from JS/jQ
您需要为箭头键绑定事件侦听器并输入，这可以从 JS/jQ 轻松完成
1min google: Binding arrow keys in JS/jQuery
1 分钟 google： 在 JS/jQuery 中绑定箭头键
