使用JavaScript检测键盘布局

Question

有没有一种方法可以使用JavaScript检测当前键盘布局？我找到了这篇文章，但它只能检测访问者是否处于英文键盘布局。我需要知道确切的布局字符串，例如de-ch、fr或en。

- Parzifal

Answer 1

我知道这个问题很旧，但对于那些被事实阻碍的人们，有些按键在其他语言环境下会映射到不同的字符，下面提供一种处理方法。

很可能，您将键盘事件处理程序绑定到了keyup或keydown事件；此时，事件中event.which或event.keyCode属性的结果与用户按下的键有关。例如，在EN布局中用于键入';'的相同键是RU布局中用于键入'ж'的键，并且事件报告186作为它们两者的代码。

但是，如果您更感兴趣的是按键后产生的字符，那么您应该使用“keypress”事件代替。此事件在keydown/up之后触发，并在event.which或event.charCode中报告所键入的字符的实际Unicode代码点，在上面的示例中为十进制1078或U+0436。

因此，如果您不想猜测键盘布局并且不需要区分keyup/keydown，则keypress可能是一个可行的选择。它不是完美的（大多数浏览器不会在像修改键、功能键和导航键等不打印字符的键上始终报告keypress事件），但比猜测可打印字符的keycode要好。

- Nathaniel

---

“而事件报告将186视为它们两个的代码。” 我认为这是错误的。尝试使用此网站http://jsfiddle.net/BWPaz/并尝试在不同的键盘语言环境之间切换。在英语美国语言环境下，我得到的代码与法语语言环境下不同。” - Jack M

@JackM 我在Chrome和Windows 8.1上遇到了相同的键码问题，即同一键位上的不同俄语和英语符号具有相同的键码。 - Dmytro Shevchenko

Answer 2

键盘布局没有标准化的标识符。它们由布局创建者分配名称。它们可能具有语言关联作为一个定义的属性。

键盘布局不应与语言或区域设置标识符混淆。特别地，没有单一的“英语布局”，而是有数十种可用于英语的布局。

我认为系统通常不会通过JavaScript使其当前布局设置可读。

因此，无论您试图通过检测键盘布局解决什么问题，都需要采取不同的方法。

- Jukka K. Korpela

Answer 3

我所了解并已经为此实现了解决方案的全部内容，就是检测非英文布局键盘，即使用任何与英文不同的字母表的语言。该解决方案依赖于正则表达式来匹配任何单词字符 \w、任何数字字符 \d 和一系列预定义的英文键盘特殊字符，因此任何其他字符，例如阿拉伯语、日语等，都将不匹配。所有这些都使用keydown事件，并且我正在使用此解决方案来限制和通知登录表单中用户名和密码字段的输入。我将其打包成以下函数：

function checkKeyboard(ob,e){
        re = /\d|\w|[\.\$@\*\\\/\+\-\^\!\(\)\[\]\~\%\&\=\?\>\<\{\}\"\'\,\:\;\_]/g;
      a = e.key.match(re);
      if (a == null){
        alert('Error 2:\nNon English keyboard layout is detected!\nSet the keyboard layout to English and try to fill out the field again.');
        ob.val('');
        return false;
      }
      return true;
    } 

然后在事件中调用以下函数：

$("#textFieldId").keydown(function(e){
        if (!checkKeyboard($(this),e)){
            return false;
        }
    });

以下是未知下投票者的实际演示DEMO！

注意：

在正则表达式模式re中，您可以添加任何缺失的特殊字符，例如#，`，|等。

- SaidbakR

---

@itzjackyscode主要设计用于密码和用户名，因此得名。 - SaidbakR

您可以在模式中添加\s以包括空格。 - SaidbakR

Answer 4

你现在可以使用Navigator接口返回的Keyboard对象。该对象提供了访问检索键盘布局映射和切换从物理键盘捕获按键的函数的功能。

请参见https://developer.mozilla.org/en-US/docs/Web/API/Keyboard 目前，此功能仍处于实验阶段，并且仅在一些主要浏览器上运行。

- Lodz

---

我测试了一下，结果返回的只有英文字母。我不确定为什么会这样。我尝试了使用希伯来语（HEB）运行这个函数，结果返回的是英文键盘映射。 - undefined

Answer 5

你想要的是如何检测用户的本地语言。在HTTP头中，这个信息存储在Accept-Language头部中，但是通过纯JS无法获取。有一个叫做'Browser Language'的jQuery插件可能会帮助你找到正确的方向。

- synthesizerpatel

---

Accept-Language、浏览器语言（这有几个意思）和键盘布局是完全不同的东西。你最多只能从其他信息中猜测键盘语言，而且通常会猜错。 - Jukka K. Korpela

谢谢您的回答！这对大多数访问者来说是可行的，但有些人的键盘布局与接受语言不同。例如，我的标题是Accept-Language: de,en;q=0.7,en-us;q=0.3，尽管我的键盘设置为de-ch（特殊字符与普通的de-de不同）。是否没有直接获取布局的方法？ - Parzifal

没有办法获取布局，你只能根据语言猜测。是的，在Querty vs. Divorak或中文繁体 vs. 中文简体的情况下 - 你可能无法确定它。想了想...我意识到，可能是可以检测到的，但是...这可能不太准确。你基本上必须等待用户输入一些内容，然后检查键码。 - synthesizerpatel

好的，非常感谢。也许我会让用户自己选择。或者你知道在Java中是否可以确定它吗？我想通过参数将键盘布局提供给Java小程序，但也许我可以重写这个小程序。 - Parzifal

Answer 6

您可以使用event.code来确定任何布局中的实际按键位置，试一试吧 http://keycode.info/

- Woold