Question

我现在正在做某种打字导师。我有用纯HTML编写的简单键盘模型。有些HTML在这里

<div class="keyboard">
<div class="keyboardRow"><span class="key" id="q">Q<sub>Й</sub></span>
<span class="key" id="w">W<sub>Ц</sub></span>
<span class="key" id="e">E<sub>У</sub></span>
<span class="key" id="r">R<sub>К</sub></span>
</div>
</div>

然后我想改变按下的键边框的颜色。我在Javascript中创建了这样的“trashcode”

document.onkeypress = checkKeyPress;
function checkKeyPress(e)
{ var KeyID = e.charCode;
  switch (KeyID){
  case 113: pkey = document.getElementById("q");
        pkey.style.borderColor = "red";
        break; 
   case 119: 
   pkey = document.getElementById("w");
   pkey.style.borderColor = "red";
   break; 
   case 101: 
   pkey = document.getElementById("e");
   pkey.style.borderColor = "red";
   break;

...............

等等。正如你所看到的那样，伙计们，我的问题是：我怎样才能避免意大利面“案例”声明，并编写一些看起来很清晰易读的代码？

Answer 1

这样做的一种方法可能是

...
pkey = document.getElementById(String.fromCharCode(KeyID));
pkey.style.backgroundColor = "red";
...

此解决方案将密钥代码（例如115,119等）转换为相应的字符。由于您的密钥标记为ID等于它们所代表的密钥，因此您只需通过id获取id为字母的元素。

Answer 2

http://codepen.io/anon/pen/uLhyI上的演示

function checkKeyPress(e) { 
  var KeyID = String.fromCharCode(e.charCode).toLowerCase();
  document.getElementById(KeyID).style.border = "solid red";
}
document.onkeypress = checkKeyPress;

Answer 3

如果你不介意使用jquery，我会建议你这样做。由于javascript优于面向事件的编程，因此最好以均匀的方式处理按键。

它还促进了异步事件处理。这基本上意味着用户可以按下多个键，浏览器不必经过那个巨大的switch语句。

此外，jquery键盘方法提供了一个key值，其中包含按下的键的字符串表示形式。所以你可以通过jquery获得一个事件处理函数。

The keydown event in the JQuery API

实施例

$(document).keydown(function(evt) {
 var selector = '#' + evt.key;
 $(selector).css('border-color', 'red');
});

这应该适用于每一把钥匙。

Answer 4

所以，亲爱的，我决定使用Keypress库来解决我的问题：

http://dmauro.github.io/Keypress/

如何增强这样的代码

4 个答案:

实施例