如何在JavaScript中获取按键并将其放入数组中？

Question

如何获取按下的键并将其放入数组中，而不是返回键码？

例如，用户按下'a'键。然后，代码将把'a'（而不是字符的键码）放入数组中。

谢谢！

- OOProg

---

为什么要使用key属性？ 尝试以下代码： document.onkeydown = function(e) {alert(e.key);};无需将keyCode转换为字符。 - MURATSPLAT

Answer 1

这个怎么样？

var your_array = [];

document.onkeydown = function (e) {
  var keyPress;

  if (typeof event !== 'undefined') {
    keyPress = event.keyCode;
  }
  else if (e) {
    keyPress = e.which;
  }

  your_array.push(String.fromCharCode(keyPress));

  return false;   // Prevents the default action
};

---

更新：如果您需要准确的字符信息（例如区分大写字母和小写字母等），请务必查看@Tim Down在下面的评论和他的其他答案。

- Daniel Vassallo

---

你需要使用 keypress 事件来获取所键入的字符，而不是 keydown 事件。 - Tim Down

@Tim：根据quiriksmode文章所述，keydown事件似乎是最可靠的。主要区别在于，使用keydown事件时，您将收到小写字母和大写字母相同的keyCode（因为您按下了相同的键）。这是否可接受取决于OP正在构建什么。我还有遗漏的吗？ - Daniel Vassallo

尊重PPK，但那个quirksmode表格并不像http://unixpapa.com/js/key.html那样有用。然而，在quirksmode中，“keyCode和charCode”一段确实包含了关键信息：`keydown`和`keyup`事件根本不包含字符信息。你似乎对它的成功是偶然的和不可靠的。如果你担心Opera不支持`charCode`，幸运的是，Opera支持`which`属性，因为它在所有非IE浏览器中都有效，比`charCode`更有用，并且不受quirksmode的影响。 - Tim Down

@Tim：有趣的观点。然而，如果我们不关心字符信息，只需要键代码（例如在实现浏览器游戏的输入时），您是否看到我的示例中存在任何问题？ - Daniel Vassallo

如果您不关心字符信息，那么使用 keydown 没有问题，但在这种情况下，keyCode 在所有浏览器中都可以很好地工作，因此没有必要查看任何其他属性。然而，原帖确实明确表示他/她对字符信息感兴趣。 - Tim Down

@Tim：我并没有把那看作是提问者的明确请求，但你可能是对的 :) ... 我之前已经点赞了你的回答，并在我的回答中引用了它，因为它目前是得票最高的。 - Daniel Vassallo

Answer 2

你需要使用keypress事件来实现此功能。 keydown和keyup不能可靠地用于获取字符信息。JavaScript键盘事件的详细说明可以在http://unixpapa.com/js/key.html上找到。请注意，保留了HTML标签。

var charsTyped = [];

document.onkeypress = function(evt) {
    evt = evt || window.event;

    // Ensure we only handle printable keys
    var charCode = typeof evt.which == "number" ? evt.which : evt.keyCode;

    if (charCode) {
        charsTyped.push(String.fromCharCode(charCode));
    }
};

- Tim Down

Answer 3

Daniel的回答很完美，但是如果你想获得实际字符（而不是数字代码），可以使用这个函数：

String.fromCharCode(code);

请参阅MDN了解更多信息。

- Christopher Scott

Answer 4

在您的事件处理程序中（假设e是事件对象）：

myarray.push(String.fromCharCode(e.charCode));

注意到fromCharCode如何返回给定Unicode字符代码的字符。还要注意我使用charCode而不是keyCode，因为它在返回字符代码时更正确，有时与键码不同（您需要字符）。

- Delan Azabani

---

我本来也想建议使用charCode，但是有些浏览器不支持它：http://www.quirksmode.org/js/keys.html - Daniel Vassallo

这是一个困难的情况。一方面，对于兼容的浏览器，keycode始终是键码，而charcode始终是Unicode值。在不兼容的浏览器中，charcode不存在，而keycode根据事件类型可能会变化为键码或Unicode值。当然，我们想要Unicode值，但在兼容的浏览器中无法看到它在keycode中的表现。根据编写网站的上下文和访问者人口统计数据，我想是时候放弃这些明显不兼容的浏览器并忽略它们了。 - Delan Azabani

哪个事件的事件处理程序？charCode仅存在于keypress事件中。对于IE，keypress事件中的keyCode是字符代码，并且您无法在IE中获取非可打印键的keypress事件，因此您可以相当可靠地获取字符代码。请参见我的答案。 - Tim Down

Answer 5

我编写了一个名为keysight的库，用于将键盘事件转换为键和字符。

var yourKeyArray = []
node.addEventListener("keydown", function(event) {
    var key = keysight(event).key      // ignores shift keys, so 'A' is given as 'a'
    // var char = keysight(event).char // only characters, and differentiates between 'A' and 'a'

    yourKeyArray.push(key)
})

- B T