@ fluentui/ 键盘键

用于确定 KeyboardEvent.key 属性,来自键盘事件.

• 安装
• 使用量
  • 获取 Key ()
  • 获取Code ()
• 为什么?
• 地方洞穴

安装

yarn add keyboard-key

# or

npm install keyboard-key

使用量

获取 Key ()

拿着 key 属性值.

document.addEventListener('keydown', event => {
  const key = keyboardKey.getKey(event);

  switch (key) {
    case 'Escape':
      // handle escape key
      break;
    default:
      break;
  }
});

见 MDN 数据 或完整列表的来源 key 数值.

获取Code ()

你也可以得到正常化的 keyCode 从一个事件. @fluentui/keyboard-key 包括散列 key 名称改为 keyCodes 用于比较:

document.addEventListener('keydown', event => {
  const code = getCode(event);

  switch (code) {
    case keyboardKey.Escape: // 27
      // handle escape key
      break;
    default:
      break;
  }
});

为什么?

之前大多数键盘标识键盘Event 属性已被按下, 已贬值为赞成 Keyboard.key。 。 。 .

: 1 个: KeyboardEvent.char : 1 个: KeyboardEvent.charCode : 1 个: KeyboardEvent.keyCode : 1 个: KeyboardEvent.keyIdentifier : 1 个: KeyboardEvent.keyLocation : 1 个: KeyboardEvent.which

:+1 : KeyboardEvent.key

很遗憾, KeyboardEvent.key 尚未达到 浏览器支持。让浏览器没有可靠的属性来识别键盘事件键.

地方洞穴

此工具在推断事件时解释移位键的使用 key 数值。 示例,描述事件 调动+ 键编号 : 将会导致 key 价值 ? 吗?。这个逻辑假设 en-US 地方键盘布局. 这个会 没有工作 如果您正在使用德国版式等不同地方 编号 : 实值 调动+ 键第7条。 。 。 .