如何检测键盘布局

在前端开发中，有时候需要检测用户的键盘布局，以便在翻译、输入法切换等方面提供更好的用户体验。本文将介绍如何使用 JavaScript 检测键盘布局。

使用 KeyboardEvent.keyCode

在早期的 DOM 标准中，可以使用 KeyboardEvent.keyCode 属性来检测按键的键码，从而进行检测键盘布局的操作。例如：

document.addEventListener('keydown', function(event) {
  console.log(event.keyCode);
});

可以根据不同的键码值来判断用户所使用的键盘布局。不过该方法已经被废弃，在现代浏览器中无法使用。

使用 KeyboardEvent.code

新的 DOM 标准中，可以使用 KeyboardEvent.code 属性来获取按下的按键的唯一标识符。例如：

document.addEventListener('keydown', function(event) {
  console.log(event.code);
});

该方法可以更加准确地判断用户所使用的键盘布局，因为不同的键盘布局对应的键位在 KeyboardEvent.code 属性中是固定的。例如，KeyQ 对应的就是键盘上的 Q 键，在不同的键盘布局下，它的位置是不同的。

检测键盘布局的示例代码

下面是一个函数，可以检测用户所使用的键盘布局。该函数会返回一个字符串，表示当前键盘布局的名称。

function detectKeyboardLayout() {
  const TEST_CASES = [
    {code: 'Digit1', expectedKey: '1'},
    {code: 'KeyQ', expectedKey: 'q'},
    {code: 'KeyZ', expectedKey: 'z'},
    {code: 'BracketLeft', expectedKey: '['},
    {code: 'Quote', expectedKey: '\''},
    {code: 'IntlBackslash', expectedKey: '\\'},
    {code: 'Enter', expectedKey: 'Enter'},
  ];

  // 使用一个对象来存储不同键盘布局下的键位
  const LAYOUTS = {
    QWERTY: {
      '1': 'Digit1',
      'q': 'KeyQ',
      'z': 'KeyZ',
      '[': 'BracketLeft',
      '\'': 'Quote',
      '\\': 'IntlBackslash',
      'Enter': 'Enter',
    },
    AZERTY: {
      // TODO: 实现 AZERTY 键盘布局的键位映射
    },
    QWERTZ: {
      // TODO: 实现 QWERTZ 键盘布局的键位映射
    },
  };

  // 遍历每种键盘布局，检测键位是否与预期相符
  for (const layoutName in LAYOUTS) {
    const layoutKeys = LAYOUTS[layoutName];
    const isMatch = TEST_CASES.every(testCase =>
      layoutKeys[testCase.expectedKey] === testCase.code);
    if (isMatch) {
      return layoutName;
    }
  }

  // 如果无法匹配任何键盘布局，则返回 null
  return null;
}

在上面的代码中，我们使用了一个测试用例数组 TEST_CASES，里面存储了一些不同键盘布局下的键位的正确值。在函数中，我们遍历了三种键盘布局，分别检测其对应的键位是否与测试用例中的预期值相符。如果有匹配的键盘布局，则返回其名称，否则返回 null。