使用 javascript 检测键盘布局

Question

有没有办法使用 JavaScript 检测当前的键盘布局？我发现这个， 但它只检测访问者是否使用英文布局。我需要知道字符串的确切布局，例如de-ch、fr 或en。

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 可能是您的可行替代方案。它并不完美（大多数浏览器不会一致地报告不打印字符的按键上的按键事件，例如修饰键、功能键和导航键），但在处理可打印字符时，它比猜测键码要好。

Answer 2

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

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

我认为系统通常不会通过 JavaScript 读取当前的布局设置。

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

Answer 3

您现在可以使用 Navigator 界面返回的 Keyboard 对象。
该对象提供对检索键盘布局图和从物理键盘切换按键捕获的功能的访问。

请参阅 https://developer.mozilla.org/en-US/docs/ Web/API/键盘

目前此功能处于实验阶段，仅适用于某些主要浏览器。

Answer 4

我对这个主题的了解以及已经实现的解决方案就是检测非英语布局键盘，即使用英语以外的任何字母的语言。解决方案是依赖正则表达式来匹配任何单词字符 \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;
        }
    });

这是 为未知投票者提供工作演示！

注意：

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

Answer 5

你要找的是如何检测他们的Locale。在 HTTP 标头中，它存储在 Accept-Language 标头，但浏览器无法通过纯 JS 访问该标头。

有一个名为“浏览器语言”的 jQuery 插件，它可能会让您走上正确的道路。

Answer 6

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

Answer 7

我过去使用过 Chrome I18N API，它适用于某些案例。

更具体地说，通过使用 detectLanguage() 您可以获得可靠的结果。

以下代码从给定字符串中检测最多 3 种语言，并将结果显示为由换行符分隔的字符串。

function detectLanguage(inputText) {
  chrome.i18n.detectLanguage(inputText, function(result) {
    var outputLang = "Detected Language: ";
    var outputPercent = "Language Percentage: ";
    for(i = 0; i < result.languages.length; i++) {
      outputLang += result.languages[i].language + " ";
      outputPercent +=result.languages[i].percentage + " ";
    }
    document.getElementById("languageSpan").innerHTML = outputLang + "\n" + outputPercent + "\nReliable: " + result.isReliable;
  });

Answer 8

如今，这被用于指纹技术。

firefox 不会公开这一点，但是基于 chromium 的浏览器，是的。 （边缘、勇敢、铬、铬、歌剧...）

navigator.keyboard.getLayoutMap()
.then(k => console.log(k.get('KeyQ') + k.get('KeyW') + k.get('KeyE') + k.get('KeyR') + k.get('KeyT') + k.get('KeyY')))