Mootools:小键盘 keyup 和 keydown 事件在同一键上返回不同的键值

Question

谁能解释一下为什么小键盘的 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: 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

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

有什么想法吗？

Answer 1

不同浏览器实现keydown、keypress、keyup事件的方式乱七八糟，连keydown、keyup事件中的keyCode值都还没有standardized跨浏览器。

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

• charCode - 按下的字符键的 Unicode 值
• keyCode - 代表用户按下的键的数字
• which - 按下的字母数字键的 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 属性来标准化:

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' and 'which' is deprecated, you should use 'char' or 'key' instead, if available.

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