国际键盘如何与 JavaScript 键盘事件一起使用？

Question

我已经写了a text editor in JavaScript that draws directly to a Canvas element（出于各种原因，但我的主要原因是我可以将该画布作为纹理贴到 WebGL 网格上）。令人惊喜的是，与我发现的任何可编辑内容的解决方案相比，它更容易实施。

我早期注意到的一件事是，使用非 en-US QWERTY 键盘布局的人抱怨某些键显示的字母不正确。在对 Windows 的语言设置和屏幕键盘进行了一些摆弄之后，我创建了一个基于代码页的解决方案，该解决方案将 keyCodes 直接映射到不同语言环境的字符串，而不是仅仅假设“没有修饰键的 keyCode 51 是数字 3 ”。因为它不是，所以在某些键盘上它是双引号。

但还是有一些奇怪的地方。几个例子（请注意，所有这些例子都是基于使用 Windows 屏幕键盘，所以我只是假设这与现实相关）：

• 法语 AZERTY 键盘会在输入字母 U 时发送 keyDown 和 keyPressed 事件，但不会发送 keyUp。我假设 U 必须需要与另一个键组合，但不知道正确的行为应该是什么阻止了我编写正确的代码。 编辑：我还没有完全弄清楚这意味着什么，other than--perhaps--that key is only used in one word the entire French language?
• 德语 QWERTZ 键盘有一个 ^（它不是插入符号，它看起来更大）键，`（反引号）键在美式键盘上，还有一个反引号键， = ( equals) 键将在美式键盘上。在这两种情况下，它们都会发送 keyDown 和 keyUp 事件，但在我使用的任何文本编辑器中似乎都没有打印任何内容，直到它们被第二次点击，然后打印了两个字符。这与组合标记有关吗？我找不到任何关于它的信息。 编辑：These are called dead keys，他们会创建重音字母。许多键盘布局都有它们。我将为此创建一个按键序列系统，这也将有助于为更复杂的 Emacs 风格的键盘快捷键（如果选择的话）提供支持。
• UK QWERTY 键盘有一个反斜杠，需要使用 ALT-GRAPH 键（美国键盘上的 Right-Alt 键）。有一个 location property of KeyboardEvent 可用于确定按下了哪个 ALT 键，但它显然在 Safari 中不可用。这是相当低的优先级，因为 Safari 通常只占我流量的 1% 或更少。但是，是否有一个适用于 Safari 的属性可以用作后备？ 编辑：我将处理这个问题，因为我的代码页系统的其余部分适用于下层和上层之间的差异-case 键。这只是新修饰键的不同代码页。我将不得不更改检测修饰键的方式，但这是一个很小的更改，实际上很容易适应键盘快捷键系统。
• 最后，从Windows的语言设置来看，世界上有很多不同的键盘布局。是否有任何键码和行为列表？我宁愿不必为了为它们生成新的代码页而手动测试每个键盘。

前两个问题是最大的。如果我只知道行为应该是什么，我就可以找出解决方案。第三个问题将适合我的代码页系统，但我将不得不改变我阅读修饰键的方式。最后一期，我可能会花钱请人来报道。

我很高兴不能 100% 地为所有浏览器中的所有用户解决这个问题。但是我遇到的大部分信息基本上都是“不要打扰”，听起来更像是“我不知道”。

编辑：选择布局不是问题。如果事情对他们不起作用，我将它作为一个选项提供给用户。我认为这是在这种情况下可以做的最好的事情，但显然如果可以的话，我会自动检测。鉴于已经选择了正确的布局，我真的只关心获得正确的行为。

我想避免任何涉及 keyPress 事件的事情，因为它并不完全可靠。如果我有可靠的键盘布局数据来源，那将不是问题。

Answer 1

您无法获得键盘布局...

没有办法（使用纯 JS 解决方案）检测用户的键盘布局。

请注意，“en-US”或“en-GB”不会映射到这些语言的任何特定/约定的键盘布局。用户的语言与其按键映射到字符的方式无关。

您可以根据他们的locale / language code 做出假设，但这并不能提供任何保证 - 它只会增加您满足适当布局的可能性。

另请参阅以下问题：

Translate Javascript keyCode into charCode for non-U.S. keyboard layout (i.e. azerty)

Detect keyboard layout with javascript

...但是你可以得到输入的字符：

但是，根据您所需的浏览器支持（使用画布，应该非常好），您可以尝试使用charCode 属性：

http://www.w3schools.com/jsref/event_key_charcode.asp

var unicodeCharCode = e.charCode;

请注意，这不会返回实际字符​​ - 您将获得代表它的数字（不是键）：

Unicode 字符代码是字符的编号（例如 数字“97”代表字母“a”）。

您可以根据需要轻松地将这些代码映射到字符或仅使用内置函数：

var userInput = String.fromCharCode(unicodeCharCode);

• 为了聪明/为自己工作，您还可以（相当简单地）编写一个库来从为某些键码返回的字符码中猜测键盘布局。但不要:)

---

替代方法：

作为解决方法的一个建议是使用隐藏的（或至少是离散的）文本输入/文本框，您的应用将重点放在它上面。

当您的应用检测到按键/按下等时，您可以获取用户输入的值并将其呈现在您的画布上。

由于您已经在捕获键盘事件，因此处理组合应该很容易（如有必要）。在某些方面甚至不需要，因为您只需要监视用户输入的输入长度（您的应用程序不必关心用户是否需要三键组合来输入字符，您只需抓住结果）。