Javascript - 获取任何键盘布局的关键描述 [英] Javascript - get key description for any keyboard layout

问题描述

对于富Web应用程序，我需要键盘快捷键。因为有许多不同的键盘布局，所以它们必须是可配置的。不幸的是，我无法找到一种方法将键盘事件映射到人类可读的快捷方式名称，例如 Ctrl + Alt + Y 或 Alt + \ 。

For a rich web application, I need keyboard shortcuts. Because there are many different keyboard layouts, they have to be configurable. Unfortunately, I can't figure out a way to map keyboard events to human-readable shortcut names such as Ctrl + Alt + Y or Alt + \.

keypress 事件没用，因为它不会触发所有键。以下是 keydown 事件的一些属性：

The keypress event is useless since it doesn't fire for all keys. Here are some properties of keydown events:

• charCode ：仅适用于可打印字符。 已弃用，根据MDN


• 代码：正常工作，但忽略了键盘布局。当我按Z键时，我的德语键盘上输入代码：KeyY。


• key ：工作，但根据修饰符给出不同的结果。 E. g。 Shift + 3在我的键盘上产生键：§，在大多数美国键盘上产生键：＃。 / li>
  
• keyCode ：该值不是唯一的。 Ä，Ö，Ü或^产生 keyCode：0 。 已弃用，根据MDN


• 其中：就像 keyCode ，该值不是唯一的。 已弃用，根据MDN


• altKey ， ctrlKey ， metaKey ， shiftKey ：用于检测修饰键

• charCode: Works only for printable characters. Deprecated, according to MDN
• code: Works, but ignores the keyboard layout. When I press Z, I get code: "KeyY" on my German keyboard.
• key: Works, but gives different results depending on modifiers. E. g. Shift+3 yields key: "§" on my keyboard and key: "#" on most US keyboards.
• keyCode: The value is not unique. Ä, Ö, Ü or ^ yields keyCode: 0. Deprecated, according to MDN
• which: Just like keyCode, the value is not unique. Deprecated, according to MDN
• altKey, ctrlKey, metaKey, shiftKey: Useful for detecting modifier keys

我该怎么做？甚至可能在不知道用户的键盘布局的情况下呢？

How should I do this? Is it even possible without knowing the user's keyboard layout?

推荐答案

事情是，此时你永远不会知道从浏览器内部进行键盘布局，你只能猜测和推测。有多种方法可以尝试某种检测，但它们总是很复杂而且不是开箱即用的解决方案。

The thing is, at this point in time you can never know the keyboard layout from within the browser, you can only guess and speculate. There are various ways to try some kind of detection, but they are always complex and not out-of-the-box solutions.

但是，有一些事情你可以可以做某事确定按下了什么键。

However, there are some things which you can do to determine somehow what key has been pressed.

所以Keydown会给你（说事件对象是e）：

So Keydown will give you (say the event object is e):

e.code ：保存一个标识正在按下的物理键的字符串。值不受当前键盘布局或修改器状态的影响，因此特定键将始终返回相同的值。 （来自mozilla.org）

e.code: Holds a string that identifies the physical key being pressed. The value is not affected by the current keyboard layout or modifier state, so a particular key will always return the same value. (from mozilla.org)

e.key ：事件代表的键的键值。如果值具有打印表示，则此属性的值与 char 属性相同。

e.key: The key value of the key represented by the event. If the value has a printed representation, this attribute's value is the same as the char attribute.

e.which 和 e.keyCode ：虽然已弃用，但会给出键盘上键的位置代码，如果e.charCode为0，则这是位置代码（如果< 256）或unicode（这意味着键盘用另一种语言切换）

e.which and e.keyCode: Although deprecated, will give you the position code of the key on the keyboard and if the e.charCode is 0, then this is either a position code (if < 256) or unicode (that means the keyboard is switched in another language)

现在棘手的部分是 e.key 实际代表 unicode 字符，如果它是可打印的，不是来自美国键盘而不是特殊键。您可以将此字符转换为十进制数并检查该值。如果它是一个unicode字符，它的十进制值将等于which和keyCode值。如果是普通ASCII，则它的小写值将等于which和keyCode值。此外，在执行此操作（转换）之前，您可以检查e.key是否为字符串（如Control，Alt，CapsLock等）或char（如a，b，c等）。所以如果它是char，然后你转换它。

Now the tricky part here is that e.key actually represents the unicode character if it is printable and is not from the US keyboard and is not a special key. You can convert this character into decimal number and check the value. If it is a unicode character, it's decimal value will be equal to the which and keyCode values. If it is and ordinary ASCII, it's lowercase value will be equal to the which and keyCode values. Also, before doing this (the conversion), you can check if e.key is a string (like Control, Alt, CapsLock, etc.) or a char (like a, b, c, etc.) So if it is a char, then you convert it.

所有这些都可以让你知道哪个键被按下了，这个键的原生可打印字符是什么。我没有德语，意大利语或其他键盘来测试，但你明白了。

All this will give you the idea which key has been pressed and what is the native printable character for this key. I don't have a German, Italian or some other keyboard to test, but you get the point.

哦，如果你担心 Shift + 3 产生§或＃，你应该始终将该组合表示为Shift + 3，无论它产生的角色如何，不要说组合会产生相同的组合。 控制 + 移 + 3 。你只需要担心字母字符，但我相信我给了你检查的方法。

Oh, and if you worry if Shift+3 yields "§" or "#", you should always represent that combination as Shift+3 no matter the character it yields, not to speak that the same will be produced with the combination of Ctrl+Shift+3. You have to worry only about the alphabetical characters, but I believe I gave you the means to check that.

另外，我相信你甚至可能不需要 e.which 和 e.keyCode ，因为 e.key 应该可以为您提供一切。

Also, I believe that you may not need even the e.which and e.keyCode, because the e.key should give you everything.

这篇关于Javascript - 获取任何键盘布局的关键描述的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！