"KeyboardEvent.key" 值是否跨浏览器一致？

Question

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

文档：

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...");
  }
}

这些名称在浏览器中是否一致？我可以确定 ArrowRight 在 Chrome、Edge、Firefox、Safari 等设备上会是 ArrowRight 吗？或者我应该使用某种 key 代码值？

Answer 1

Here you have all the keycodes according to w3.org，跨浏览器。这些是您要使用的键码。您可以键入 arrowLeft、right 或 backspace 或其他任何内容来找到该键对应的 keyvalue。

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

Answer 2

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

名称是 W3 标准：

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

但是您将无法在移动设备 Chrome 中阅读 event.key 或 event.keyCode Android。

这里有一个 Chromium 错误。

在 https://bugs.chromium.org/p/chromium/issues/detail?id=118639

中进行了长时间的讨论

"KeyboardEvent.key" 值是否跨浏览器一致？

Are "KeyboardEvent.key" values consistent cross-browsers?

javascript

keyboard

cross-browser

keyboard-events

reactjs