检测键盘布局是否导致修改器冲突答案

【问题标题】：Detect if keyboard layout causes modifier collision检测键盘布局是否导致修改器冲突
【发布时间】：2021-08-26 07:13:52
【问题描述】：

我最近收到了来自瑞典的一位客户的错误投诉，其中默认的 Mac 键盘布局显示 Option + 2 会生成一个@ 符号。客户告诉我，芬兰的所有键盘也都有这样的布局。

据我所知，具有美国 QWERTY 布局或英国 QWERTY 布局的键盘具有 Shift + 2 来制作@ 符号。问题在于我在网站中有一个快捷方式设置，它使用 Option + 2 来执行导航。这会迫使瑞典/芬兰的任何用户在想要输入@ 符号时进行导航。

有没有办法预先知道用户正在使用的键盘布局具有“不是我期望的修饰符”？还是我必须为他们提供禁用导航的选项？我目前检测键的方式（使用 Angular）：

  @HostListener('document:keydown', ['$event'])
  public onPublicKeyDown(event: KeyboardEvent) {
    if (event.altKey) {
      switch (event.code) {
        case 'Digit2':
          // Perform the navigation
      }
    }
  }

【问题讨论】：

无法检测键盘布局，因为键盘没有标准化标识符。我想以某种方式解决此问题的最简单方法是检查访问者是否使用 Mac：var isMac = navigator.platform.toUpperCase().indexOf('MAC')>=0;。然后只需像 if (isMac) 那样做一个 if 语句并使用其他东西。
这里使用 Ctrl + 2 组合是否合适？

标签： javascript

【解决方案1】：

在可用性和与各种操作系统的兼容性方面，我建议将 Alt 更改为 Ctrl（即 Ctrl + 2 ）。

但是，也有 JS 方法来检查用户是否没有尝试在文本字段中输入文本。

事件冒泡 up and down 从焦点元素到等待处理的顶级元素 (BODY)。

很容易检查事件是否达到了它的目标：

// check that event was not picked by inputs and bubbled up
// to the element to which it was attached (i.e. document.body)
if (event.currentTarget === event.target) {
...
}

event.currentTarget 指的是附加了事件处理程序的元素（我想onPublicKeyDown 事件处理程序附加到页面的 BODY）

event.target 指的是事件被调度到的对象（当焦点在 INPUT 元素中并且用户正在将文本输入到字段中时，它将是 INPUT，如果焦点不在 INPUT 内，它可能是页面的主体.

以下是工作示例：

function onPublicKeyDown(event) {
    // check that event was not picked by inputs and bubbled up
    // to the element to which it was attached (i.e. document.body)
    if (event.target === event.currentTarget) {
        if (event.altKey) {
            switch (event.code) {
                case 'Digit2':
                    // Perform the navigation
                    alert('Navigating away...');
            }
        }
    }
}
document.body.addEventListener('keydown', onPublicKeyDown);

Try press 'option + 2' when focused inside input and when outside.<br>
<input type="text" />

【讨论】：