Question

任何人都可以了解为什么numpad keyup和keydown事件返回不同的键值？

考虑一下：

<input type="text" />
<script>
    document.getElement('input').addEvents({
    'keydown':function(e){
            console.log('keydown: code:' + e.code + ', key:' + e.key);
    },
    'keyup':function(e){
            console.log('keyup  : code:' + e.code + ', key:' + e.key + '\n');
        }
    });
</script>

我期望每个事件都为keydown和keyup返回相同的键值，但是我得到了下面的输出（在按下0,1,2,8和9之后）：

keydown：代码：96，关键：0
  keyup：代码：96，key：`

keydown：代码：97，key：1
  keyup：代码：97，key：a

keydown：代码：98，key：2
  keyup：代码：98，key：b

keydown：代码：104，关键：8
  keyup：代码：104，key：h

keydown：代码：105，关键：9
  keyup：代码：105，key：i

通常我会使用按键，因此从未遇到任何问题。当在键盘上按下相应的小键盘时突出显示屏幕上的小键盘代表按钮时，我遇到了这个问题（在向下突出显示，然后在上方移除突出显示）。

有什么想法吗？

Answer 1

不同的浏览器如何实现keydown，keypress和keyup事件，甚至keydown和keyup事件中的keyCode值在浏览器中还不是standardized，这是一个很大的混乱。

目前，事件对象有三个属性，其中包含有关按下的键的信息：

charCode - 按下的字符键的Unicode值
keyCode - 表示用户按下的键的数字
which - 按下的字母数字键的keyCode或charCode编号

按下的键的值存储在keyCode或charCode属性中，但两者都不存在，keyCode总是在keydown和keyup事件中设置，charCode在keypress事件中设置。

因此，例如，如果按'e'：

keydown和keyup报告：

charCode = 0，keyCode = 69，其中= 69 - 数字69处的字符是大写字母E



按键报告：

charCode = 101，keyCode = 0，其中= 101 - 数字101处的字符是小写字母e

如果你在小键盘中按数字9：

keydown和keyup报告：

charCode = 0，keyCode = 105，其中= 105 - 数字105处的字符是小写字母i



按键报告：

charCode = 57，keyCode = 0，其中= 57 - 数字57处的字符数字为9

Mootools的

Mootools尝试通过添加event.code和event.key属性来标准化事物：

event.code = event.which || event.keyCode;
event.key = String.fromCharCode(code).toLowerCase();

它还会转换键盘上的数字的keyCodes，但仅适用于keydown事件（版本1.4.5），而不适用于keyup。我不知道这是否是故意的，但是通过替换mootools-core-1.4.5-full-nocompat.js中的行1163，可以很容易地修改keyup事件以具有相同的行为：

if (type == 'keydown') {

为：

if (type == 'keydown' || type == 'keyup') {

这样，keyup事件中的keyCodes也将被转换。

有趣的是，Mozilla Developer Network说：

'charCode'，'keyCode'和'which'已弃用，如果可用，您应该使用'char'或'key'。

但我还没有看到Firefox或Chrome中的实现。 jQuery为事件对象添加了“key”属性，但它总是“未定义”（可能取决于浏览器的实现）。

Answer 2

在收听keydown和keyup事件时使用e.code而不是e.key。 e.key只对按键事件有效。

请参阅：

Mootools：numpad keyup和keydown事件在同一个键上返回不同的键值

2 个答案:

Mootools的