屏幕上与键码相对应的位置

Question

我正在尝试创建代码，允许我按下键盘上的按钮并在屏幕上显示相应的圆圈。该位置将与按下的键相关。例如，字母 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 变量。

Answer 1

将 x/y 位置添加到键盘映射中。两个单独的类是实现此目的的最佳方式，因为它允许您根据需要设置所选和未选中键的样式（包括隐藏和显示它们）

我在这里做了一个小的QWERTY样本

http://jsbin.com/ivuseh/2

代码视图：

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

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