如何在 JavaScript 中按下键并将其放入数组中？答案

【问题标题】：How to get the key pressed and put into array in JavaScript?如何在 JavaScript 中按下键并将其放入数组中？
【发布时间】：2011-04-10 13:46:34
【问题描述】：

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

例如，用户将按“a”。然后，代码会将 'a' - 而不是字符的键码 - 放入一个数组中。

提前致谢！

【问题讨论】：

为什么要使用key属性？试试这个：document.onkeydown = function(e) {alert(e.key);};无需将keyCode转为字符。

标签： javascript keyboard keypress

【解决方案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's cmets 和his other answer。

【讨论】：

您需要使用keypress 事件来获取输入的字符，而不是keydown 事件。
@Tim：根据the quriksmode article，keydown 事件似乎是最可靠的。主要区别在于，当使用keydown 事件时，您将收到相同的keyCode 用于小写和大写字母（因为您按下的是同一个键）。这是否可以接受，取决于 OP 正在构建什么。我还缺少其他东西吗？
尽管对 PPK 给予了应有的尊重，但那个特殊的 quirksmode 表并不像 unixpapa.com/js/key.html 那样有用。 quirksmode 中标题为“keyCode 和 charCode”的段落确实包含了它的症结：keydown 和 keyup 事件根本不包含字符信息。您可能似乎取得的任何成功都是巧合和不可靠的。如果您担心 Opera 不支持 charCode，幸运的是 Opera 支持 which 属性，因为它适用于所有非 IE 浏览器，因此比 charCode 更有用，并且不在 quirksmode 中。跨度>
@Tim：有趣的点。但是，如果我们不关心字符信息，只需要键码（例如在实现浏览器游戏的输入时），您在我的示例中看到任何问题吗？
如果您不关心字符信息，那么使用keydown 没有问题，但在这种情况下，keyCode 在所有浏览器中都能正常工作，因此无需查看任何其他属性。 OP 确实明确表示他/她对角色信息感兴趣。

【解决方案2】：

为此，您需要 keypress 事件。 keydown 和 keyup 不能可靠地用于获取字符信息。关于 JavaScript 关键事件的优秀而详细的解释在 http://unixpapa.com/js/key.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));
    }
};

【讨论】：

【解决方案3】：

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

String.fromCharCode(code);

请参阅MDN 了解更多信息。

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

我也打算推荐charCode，但是有些浏览器不支持它：quirksmode.org/js/keys.html
这是一个困难的局面。一方面，对于兼容的浏览器，keycode 始终是 keycode，charcode 始终是 Unicode 值。在不兼容的浏览器上，charcode 不存在，并且 keycode 在 keycode 或 Unicode 值之间变化，具体取决于事件的类型。当然，我们需要 Unicode 值，但在兼容浏览器的键码中永远看不到它。根据正在编写的网站的上下文和访问者的人口统计，我想是时候继续并忽略这些公然不合规的浏览器了。
哪个事件的事件处理程序？ charCode 仅存在于 keypress 事件中。对于 IE，keypress 事件中的 keyCode 是字符代码，并且您不会在 IE 中获得不可打印键的按键事件，因此您可以获得相当可靠的字符代码。看我的回答。

【解决方案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)
})

【讨论】：