屏幕上与键码对应的位置答案

【问题标题】：Location on screen corresponding to keycode屏幕上与键码对应的位置
【发布时间】：2012-12-10 06:35:27
【问题描述】：

我正在尝试创建允许我按下键盘上的按钮并在屏幕上显示相应圆圈的代码。该位置将与按下的键相关。例如，字母 a 与 b 不同。到目前为止，这是我所拥有的：

<script>

        $(document).bind('keyup',function(event){
            var keyCode = event.keyCode;
            var theObjectCoorespondingToTheKeyTheyPressed = _.where(keyPlacementMap,{keycode:keyCode});
            theObjectCoorespondingToTheKeyTheyPressed = theObjectCoorespondingToTheKeyTheyPressed[0];
            console.log(event);
        })

    </script>

我最终会更改变量名；现在将它们命名为这样对我很有用。

我也在使用 jquery 和下划线，并且我有一个包含所有键码的数组，以及一个随机的 x 和 y 变量。

【问题讨论】：

那你有什么问题？
“我最终会更改变量名称” - 或者您现在可以将其更改为 correspondingObject 这样我们就不必向右滚动查看你所有的代码。（当然，“ToTheKeyTheyPressed”部分暗示了它是关键事件处理程序中的局部变量。）
考虑为每个元素添加一个data- 属性，该属性等于它所代表的keycode。然后只需突出显示在keyup 事件中收到的元素

标签： javascript jquery underscore.js keycode keyup

【解决方案1】：

将 x/y 位置添加到您的键盘映射。两个单独的类是完成此操作的最佳方式，因为它允许您随意设置选定和未选定键的样式（包括隐藏和显示它们）

我在这里做了一个小型 QWERTY 示例

http://jsbin.com/ivuseh/2

代码视图：

http://jsbin.com/ivuseh/2/edit

'.button' 类可以为按下的键设置样式，但是您喜欢更大、彩色、可见的。在示例中，我将重绘每个按键上的所有按钮，这是不必要的。很容易将这些功能分开进行优化。

【讨论】：