“KeyboardEvent.key”值是否跨浏览器一致？答案

【问题标题】：Are "KeyboardEvent.key" values consistent cross-browsers?“KeyboardEvent.key”值是否跨浏览器一致？
【发布时间】：2020-07-28 20:07:15
【问题描述】：

我正在构建这个组件，我依赖 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 代码值？

【问题讨论】：

标签： javascript reactjs keyboard cross-browser keyboard-events

【解决方案1】：

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

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

【讨论】：

谢谢，但这是否意味着字符串中的event.key 值不一致？
不客气 :) 我不知道，你可以通过在不同的浏览器上运行你的项目来弄清楚。但问题是：为什么要使用字符串？您有 100% 跨浏览器的键码，因此您可能希望使用这些键码。
那将是为了更好的可读性。但我会进行一些测试！再次感谢！
您好，经过进一步测试，这不适用于移动设备。 W3 测试工具显示code 229 基本上每个数字、逗号或点。看看：stackoverflow.com/questions/61248020/…

【解决方案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长讨论

【讨论】：