使用键盘箭头和回车键选择div元素？

Question

有没有办法通过按键盘上的箭头键来浏览div元素的网格，并通过按回车键“单击”所选定的div？我知道我应该至少尝试让它以某种方式工作，但我完全不知道如何实现它，以及它是否可能。

我知道如果不使用鼠标，以下内容将无效，那么我该怎么做才能在特定的div上显示一些“焦点”呢？

.show:hover{
    width:94px;
    height:94px;
    border:3px solid black;
}

.lock{
    pointer-events:none;
}

任何开始的提示？我的游戏在这里：http://jsfiddle.net/94jerdaw/WXEes/ 编辑：在当前位置，是否可能像现在这样导航div字段，向“上”移动，还是我必须为每个div创建一个起始点的情况，并伴随着它应该在上下左右事件中去的每个div？

- Dave

---

我猜这个https://dev59.com/qHM_5IYBdhLWcg3wXyDZ 是你正在寻找的。 - optimisticupdate

@smb 那不是他想要的。他不仅需要能够找到某个键何时被按下，还需要基于它选择 div 元素。 - markasoftware

他需要一个提示而不是一个可用的解决方案，使用按键处理程序和例如类切换（如“selected”，“actived”）应该可以解决问题。 - optimisticupdate

Answer 1

希望您对此问题仍然感兴趣。我有些时间，而且我一直想要自己的记忆游戏。因此，我开始构建您所需的功能，完整代码请参见Fiddle。由于fiddle框架，您必须在游戏上单击一次。

编辑：抱歉，在我的脚本中有一些无用代码，因为我复制了自己的基本设置来进行插件编写，稍后将删除它。

它还没有完成，但今天我会完成它。我将其构建为一个插件，因为以后我想添加一些选项。但是键盘移动的想法应该是清晰的。

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

代码太多了，无法全部发布在这里，所以这里是一个片段：

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

- optimisticupdate

Answer 2

你需要为箭头键和回车键绑定事件监听器，可以很容易地通过JS/jQ来实现。

1分钟谷歌搜索： 在JS/jQuery中绑定箭头键

- kodisha