如何使用Javascript在Firefox等浏览器中检测客户端键盘布局

你提到的 navigator.keyboard.getLayoutMap() 属于 Keyboard API 范畴，目前仅 Chromium 内核浏览器（Chrome、Edge、Opera 等）提供支持，Firefox、Safari 均未实现该接口，没有原生官方的对等 API 可以直接调用。

可跨浏览器使用的替代实现方案 #

• 用户输入特征推断方案
  这是目前兼容性最好、准确率最高的实现方式，核心逻辑是监听键盘输入事件，比对物理按键编码（code 属性，对应按键的物理位置）和输入字符（key 属性，对应当前布局输出的字符）的映射关系来判断布局类型。
  示例实现代码：

// 预设常用布局的典型按键映射规则
const layoutTestMap = {
  KeyQ: { qwerty: 'Q', azerty: 'A', qwertz: 'Q' },
  KeyW: { qwerty: 'W', azerty: 'Z', qwertz: 'W' },
  KeyA: { qwerty: 'A', azerty: 'Q', qwertz: 'A' },
  KeyY: { qwerty: 'Y', azerty: 'Y', qwertz: 'Z' }
}

let currentLayout = 'unknown'

document.addEventListener('keydown', (event) => {
  // 只处理字母区的测试按键，忽略修饰键、功能键等
  if (!layoutTestMap[event.code] || event.ctrlKey || event.altKey || event.metaKey) return

  const keyChar = event.key.toUpperCase()
  const testRules = layoutTestMap[event.code]

  if (keyChar === testRules.azerty) currentLayout = 'azerty'
  else if (keyChar === testRules.qwertz) currentLayout = 'qwertz'
  else if (keyChar === testRules.qwerty) currentLayout = 'qwerty'

  console.log('检测到的键盘布局：', currentLayout)
})

该方案特点：全浏览器兼容，无需申请特殊权限，用户触发键盘输入后即可获得准确结果；缺点是无法在页面加载完成、用户未进行任何输入操作时提前获取布局信息。

• 语言时区模糊推断方案
  如果需要在页面加载阶段就拿到粗略的布局结果，可以结合用户的系统语言偏好、时区信息做模糊匹配：
  示例实现代码：

function guessLayoutByLocale() {
  const lang = navigator.language || ''
  const region = lang.split('-').pop().toLowerCase()

  // 常见地区对应的默认键盘布局映射
  const regionLayoutMap = {
    fr: 'azerty',
    de: 'qwertz',
    ru: 'jcuken',
    jp: 'jis',
    kr: 'dubeolsik'
  }

  return regionLayoutMap[region] || 'qwerty'
}

console.log('模糊推断的键盘布局：', guessLayoutByLocale())

该方案特点：无需用户交互，页面加载即可获得结果；缺点是准确率较低，仅能作为粗筛参考，无法适配用户手动切换非默认布局的场景。

内容的提问来源于stack exchange，提问作者Basj