“ KeyboardEvent.key”的值是否与跨浏览器一致？

Question

我正在构建此组件，并且我依赖event.key处理程序中的onKeyDown值来允许/禁止某些输入。

DOCS：

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values

const ALLOWED_KEYS = [
  "Ctrl", "Meta", "Shift","Home", "End", 
  "Backspace", "Delete", 
  "ArrowLeft", "ArrowRight", "Tab"
];

// ....

function onKeyDown(event) {
  if (ALLOWED_KEYS.indexOf(event.key) >= 0) {
    console.log("Allowed...");
  }
  else {
    event.preventDefault();
    console.log("NOT allowed...");
  }
}

这些名称在浏览器之间是否一致？我可以确定在Chrome，Edge，Firefox，Safari等设备上，ArrowRight是否为ArrowRight？还是应该使用某种key代码值？

Answer 1

Here您拥有根据keycodes所有的w3.org，它们是跨浏览器的。这些是您要使用的密钥代码。您可以键入arrowLeft，right或Backspace或任何其他内容来找到对应于该键的keyvalue。

此工具非常方便，因此您可以将该链接保存在某处。

Answer 2

在大多数浏览器中，它应该可以正常工作。

名称是W3标准：

https://www.w3.org/TR/uievents-key/#named-key-attribute-values

但是您将无法在Android的Chrome浏览器中读取event.key或event.keyCode。

有一个Chromium错误。

https://bugs.chromium.org/p/chromium/issues/detail?id=118639中的长时间讨论