为什么 ^ 的 JS 键盘代码返回死了？

Question

我正在做一个简单的 JS 脚本，它获取所有键盘事件并将它们显示在屏幕上。每次我在键盘上尝试符号 ^ (Alt Gr + ^) 时，JS 都会返回死代码。

为什么会这样，我该如何解决？

editor.addEventListener('keydown', function (e) {
    var keyNum = event.which || event.keyCode;
    
    switch(keyNum) {
    case 9:
        buffer += "\t";
        break;
    case 13:
        buffer += "\n";
        break;
    default:
        if (window.event) { // IE
            key = e.key;
        } else if (e.which){ // Netscape/Firefox/Opera
            key = e.which;
        } 
        buffer += key;
        break;
    }
    
    renderText(buffer);
});

Answer 1

这是故意的，因为这个键是一种特殊类型的修改键：

这个名字来源于机械打字机，dead key指的是不移动纸架而是等待下一次击键发挥作用的键。

现在在大多数软件上下文中，当您按下此键时，它会以某种方式突出显示以表明它本身不是一个完整的字符。

（虽然字符 ^ 存在，但您仍然需要按第二个键，如空格来移动插入符号）

问题是：按下这个键时浏览器应该做什么？

如果我们看一下 KeyboardEvent 接口，它提供了两个有用的属性来了解更多关于按键的信息，即

key

和

code

属性。

code

属性是指绑定到键盘布局的物理键。检测按下哪个物理键没有问题，在我的情况下按下 ^ 返回

BracketLeft

。同样，这取决于布局：例如，在 AZERTY 布局中，按 A 会给出

KeyQ

代码。

key

属性指的是键的可打印表示。这就是问题所在，因为死键通常不是一个完整的字符，因为系统正在等待下一次击键。所以它没有可打印的表示（还）。正如 MDN 文章 所说：

如果 KeyboardEvent 表示按下死键，则键值必须为“死”。

所以你会观察到与其他口音相同的行为 ¨ ` 等等，它们都返回一个

key

属性，值为

Dead

.

与

AltGr

或

⌥ Option

等其他修饰符相反，它们在按下另一个键的同时被按住，死键在它应该修改的键之前被按下并释放。您可以使用 KeyboardEvent 的

altKey

和

metaKey

属性检测到前者，但是您无法检测到 ^ 修饰符，因为它是一个死键而不是一个完整的字符。

Answer 2

键盘事件

which

和

keyCode

都已弃用，并且已经存在多年。您应该使用

key

，这是确定在所有键盘和语言中准确按下的键值的现代方法。

addEventListener('keydown', function (event) {
  console.log(event.key);
});

来自上面的链接

如果 KeyboardEvent 表示按下死键，则键值必须为“死”。

Answer 3

在美式或英式键盘上输入 {Shift}6 得到 ^ 就可以了。

在其他语言中，您必须输入不同的内容，例如德语键盘只需 ^/°（左上角的键）即可

e.key = "Dead"
e.code = "Backquote"
e.keyCode = 220

所以如果不使用特殊外壳（并且可能猜测您的用户使用的是哪种语言键盘），解释“Dead”似乎很困难