选择并使用键盘箭头选择div元素并输入密钥？ [英] Choose and select div elements with keyboard arrows and enter keys?

问题描述

是否有任何方式通过按键盘上的箭头键来浏览div元素的网格，并通过按回车键点击所选div？我知道我至少应该尝试做这项工作，但我完全无法知道如何做到这一点，甚至可能。

我' m意识到如果不使用鼠标，以下将无效，那么我能做些什么来显示某种特定div的焦点？

  .show：hover {
 width：94px; 
 height：94px; 
 border：3px纯黑色; 
} 
 
 .lock {
 pointer-events：none; 
} 
  

任何提示从哪里开始？我的游戏在这里： http://jsfiddle.net/94jerdaw/WXEes/

编辑：

是否可以按照原样导航div字段，现在的位置还是必须为每个div做一个案例作为始发点，并伴随着每个div，它应该在上/下/左/右事件中进行？

解决方案

希望你的问题对你仍然很有趣。我有一段时间，我一直想拥有自己的记忆游戏。因此，我开始构建您所需的功能，完整代码请参阅小提琴。由于是小提琴框，你必须在游戏中点击一次。

编辑：对不起，我的脚本中有一些垃圾代码，因为我分叉了自己的一个基本设置对于插件，稍后将删除它。

尚未完成，但今天我会完成它。我将它作为一个插件来构建，因为后来我想添加一些选项。但是关键移动的想法应该很清楚。

我创建了一个Map-Object（您也可以使用一个数组，我觉得更容易）来找到位置。

太多的代码在这里发布，所以这里是一个片段：

  $（window）.keydown（function（e）{
 //初始设置第一张卡片为
 var actCard，nextCard; 
 
 if（$（'。cardset'） （'。selected'）。length（1）{
 $（'＃card1'）。addClass（'selected'）; 
} else {
 switch（e.which ）{
 case 37：// left 
 $（'。cardset'）。find（'。selected'）。cardMoveHorizo​​nt（'prev'，cardMap）; 
 break; 
 
 case 38：// up 
 $（'。cardset'）。find（'。selected'）。cardMoveHorizo​​nt（'up'，cardMap）; 
 break; 
 
 case 39：// right 
 $（'。cardset'）。find（'。selected'）。cardMoveHorizo​​nt（'next'，cardMap）; 
 bre ak; 
 
 case 40：// down 
 $（'。cardset'）。find（'。selected'）。cardMoveHorizo​​nt（'down'，cardMap）; 
休息; 
 
默认值：
 return; //退出此处理程序的其他键
} 
 e.preventDefault（）; 
} 
}）; 
  

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.

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?

.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/

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?

解决方案

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.

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();
    }
});

这篇关于选择并使用键盘箭头选择div元素并输入密钥？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！