3

谁能解释为什么 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：code：96，key：0
keyup：code：96，key：`

按键：代码：97，按键：1 按键
：代码：97，按键：a

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

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

按键：代码：105，按键：9 按键
：代码：105，按键：i

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

有任何想法吗？

4

2 回答 2

2

不同浏览器如何实现 keydown、keypress 和 keyup 事件存在很大的混乱，甚至 keydown 和 keyup 事件中的 keyCode 值还没有跨浏览器标准化。

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

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

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

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

  • keydown 和 keyup 报告：
    • charCode=0, keyCode=69, which=69 - 第 69 位的字符是大写字母 E
  • 按键报告：
    • charCode=101, keyCode=0, which=101 - 数字 101 的字符是小写字母 e

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

  • keydown 和 keyup 报告：
    • charCode=0, keyCode=105, which=105 - 数字 105 的字符是小写字母 i
  • 按键报告：
    • charCode=57, keyCode=0, which=57 - 数字 57 的字符是数字 9

穆工具

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

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

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

if (type == 'keydown') {

到：

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

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

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

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

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

于 2013-06-06T19:46:52.780 回答
0

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

看：

于 2013-06-06T12:03:25.497 回答