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

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>

我本来以为每个事件都会为键降和键增返回相同的键值，但相反，我得到了下面的输出（在按0，1，2，8和9之后）：

按键：代码：96，按键：0＜br＞按键：代码:96，按键`

keydown：代码：97，密钥：1
keyup：代码：97，密钥：a

向下键：代码：98，键：2
向上键：代码:98，键:b

按键:代码:104，按键:8
按键:代码:104，按键:h

向下键：代码：105，键：9
向上键：代码:105，键：i

通常我会使用按键，因此，从来没有任何问题。当在键盘上按下相应的数字小键盘键(向下突出显示，向上取消突出显示)时，我在屏幕上突出显示数字小键盘代表按钮时遇到了这种情况。

有什么想法吗？

Answer 1

在侦听按键和键控事件时使用 e.code 而不是 e.key。e.key仅在按键事件中可靠。

请参见：

• http://mootools.net/docs/core/Types/DOMEvent
• http://www.quirksmode.org/js/keys.html

Answer 2

不同的浏览器如何实现键下、按键和键控事件存在很大的混乱，甚至键降和键控事件中的 keyCode 值也尚未跨浏览器标准化。

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

• 字符码 - 按下字符键的 Unicode 值
• keyCode - 表示用户按下的键的数字
• 其中 - 按下字母数字键的键代码或字符代码编号

按下的键的值存储在keyCode或charCode属性中，但不会同时存储在这两个属性中，keyCode始终在keydown和keyup事件中设置，charCode在keypress事件中设置。

因此，例如，如果您按“e”：

• 键降和键控报告：
  • 字符代码 = 0，keyCode = 69，其中 = 69 - 数字 69 处的卡拉克特是大写字母 E
  < li>charCode=101，keyCode=0，其中=101 -第101个字符是小写字母e

  如果你在numpad中按9号：

  • 键降和键控报告：
    • charCode=0，keyCode=105，其中=105 - 数字105处的卡拉克特是小写字母i
    < li>charCode=57，keyCode=0，其中=57 -第57个字符是数字9

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

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

    它还转换数字小键盘上数字的键代码，但仅适用于键控事件（版本 1.4.5 ），而不适用于键控。我不知道这是有意还是无意的，但是可以通过替换mootools-core-1.4.5-全无相容中的行1163来轻松修改键控事件以具有相同的行为.js：

    if (type == 'keydown') {
    

    自：

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

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

    有趣的是，Mozilla 开发者网络说：

    charCode '，' keyCode '和' which '已被弃用，您应该使用' char '或' key '来代替，如果可用的话。

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