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


Mootools: numpad keyup and keydown events returns different key values on the same key

任何人都可以阐明为何小键盘键输入和键输入事件返回不同的键值吗？

考虑一下：

1
2
3
4
5
6
7
8
9
10
11
<input type="text" />

    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 + '\
');
        }
    });

我期望每个事件对于keydown和keyup都返回相同的键值，但是，我得到了下面的输出(按0、1、2、8和9后)：

keydown: code:96, key:0
keyup : code:96, key:`

keydown: code:97, key:1
keyup : code:97, key:a

keydown: code:98, key:2
keyup : code:98, key:b

keydown: code:104, key:8
keyup : code:104, key:h

keydown: code:105, key:9
keyup : code:105, key:i

通常，我会使用按键，因此，从来没有任何问题。 当在键盘上按下相应的数字键盘键时突出显示屏幕上的数字键盘代表按钮时，我碰到了这一点(突出显示向下，突出显示删除)。

有任何想法吗？

不同的浏览器如何实现击键，击键和击键事件存在很大的混乱，即使击键和击键事件中的keyCode值尚未跨浏览器标准化。

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

  • charCode-按下的字符键的Unicode值
  • keyCode-一个数字，代表用户按下的键
  • 其中-按下的字母数字键的keyCode或charCode数字

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

因此，例如，如果您按" e"：

  • keydown and keyup reports:

    • charCode=0, keyCode=69, which=69 - caracter at number 69 is capital letter E
  • keypress reports:

    • charCode=101, keyCode=0, which=101 - caracter at number 101 is small letter e

如果您在小键盘上按数字9：

  • keydown and keyup reports:

    • charCode=0, keyCode=105, which=105 - caracter at number 105 is small letter i
  • keypress reports:

    • charCode=57, keyCode=0, which=57 - caracter at number 57 is digit 9

Mootools

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

1
2
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事件修改为具有相同的行为：

1
if (type == 'keydown') {

至：

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

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

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

'charCode', 'keyCode' and 'which' is deprecated, you should use 'char' or 'key' instead, if available.

但是我还没有在Firefox或Chrome浏览器中看到这种实现。并且jQuery向事件对象添加了" key"属性，但是它始终是" undefined"(可能取决于浏览器的实现)。

侦听keydown和keyup事件时，请使用e.code而不是e.key。 e.key仅在按键事件时可靠。

看到：

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