javascript - “KeyboardEvent.key”值是否跨浏览器一致？

Question

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

文档：

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会出现ArrowRight在 Chrome、Edge、Firefox、Safari 等平台上吗？或者我应该使用某种key代码值？

标签： javascriptreactjskeyboardcross-browserkeyboard-events

Answer 1

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

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