国际键盘如何与JavaScript键盘事件配合使用？

Question

我在JavaScript中编写了一个直接绘制到Canvas元素的文本编辑器(由于各种原因,但我的主要原因是我可以将该画布作为纹理打到WebGL网格上).令人高兴的是,我发现任何内容可编辑的解决方案都更容易实现.

我早期注意到的一件事是来自键盘布局的人的抱怨,除了美国QWERTY,有些键显示不正确的字母.在使用Windows的语言设置和屏幕键盘进行了一些调整之后,我创建了一个基于代码页的解决方案,它将keyCodes直接映射到不同语言环境的字符串,而不是仅仅假设"没有修饰键的keyCode 51就是数字3" ".因为它不是,在一些键盘上它是双qoute.

但仍有一些奇怪之处.一些例子(请注意,所有这些示例都基于使用Windows屏幕键盘,所以我只假设这与现实相关):

• 在法国AZERTY键盘发送KeyDown和当U字键入的keyPressed事件,但从来没有一个使用keyUp.我假设U必须与另一个密钥组合,但不知道正确的行为应该是什么阻止我编写正确的代码.编辑:我还没有弄清楚这意味着什么,除了 - 也许 - 这个关键词仅用于整个法语的一个词？
• 在德国的QWERTZ键盘有^(它不是一个插入符号,它看起来更大)的键,`(反引号)键,将是美国键盘上,而反引号键,其中=(等于)键将是美式键盘上.在这两种情况下,它们都会发送keyDown和keyUp事件,但似乎不会在我使用的任何文本编辑器中打印任何内容,直到它们再次被击中,然后打印出两个字符.这与组合标记有关吗？我找不到任何关于它的东西. 编辑:这些被称为死键,他们创建重音字母.很多键盘布局都有它们.我将为此创建一个密钥排序系统,这也有助于为更复杂的Emacs风格的键盘快捷键提供支持(如果有的话).
• 在英国QWERTY键盘出现问题,需要使用ALT-GRAPH键(右-Alt键在美式键盘)反斜杠.KeyboardEvent有一个位置属性,可用于确定按下了哪个ALT键,但它显然在Safari中不可用.这是非常低优先级,因为Safari通常只占我流量的1%或更少.但是,有一个适用于Safari的属性我可以用作后备吗？ 编辑:我将处理这个问题,因为我的代码页系统的其余部分适用于大写和小写键之间的差异.它只是新修饰键的不同代码页.我将不得不改变修改键的检测方式,但这是一个小改动,实际上很容易适应键盘快捷键系统.
• 最后,从Windows的语言设置来看,世界上有许多不同的键盘布局.是否有任何键码和行为列表？我宁愿不必手动测试每个键盘只是为它们生成一个新的代码页.

前两个问题是最大的问题.如果我只知道应该是什么行为,我可以找出解决方案.第三个问题将适合我的代码页系统,但我必须改变我读取修饰键的方式.最后一期,我可能会付钱给别人.

我很好,无法在100%的时间内为所有浏览器的所有用户解决问题.但我遇到的大部分信息基本上都是"不要打扰",这听起来更像"我不知道".

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

我想避免涉及keyPress事件的任何事情,因为它不是完全可靠的.如果我在键盘布局上有可靠的数据源,那就不是问题了.

Answer 1

你不能得到键盘布局......

没有办法(使用纯JS解决方案)来检测用户的键盘布局.

请注意,"en-US"或"en-GB"不会映射到这些语言的任何特定/约定的键盘布局.用户的语言与其键映射到角色的方式无关.

您可以根据他们的区域设置/语言代码进行假设,但这并不能提供任何保证 - 它只会增加您为适当布局提供服务的可能性.

另见这些问题:

将Javascript keyCode转换为charCode,用于非美国键盘布局(即azerty)

使用javascript检测键盘布局

...但你可以用它输入的字符:

但是,根据您所需的浏览器支持(使用canvas,应该相当不错),您可以尝试使用该charCode属性:

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

var unicodeCharCode = e.charCode;

请注意,这不会返回实际字符​​ - 您将获得代表它的数字(不是键):

Unicode字符代码是字符的编号(例如,数字"97"表示字母"a").

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

var userInput = String.fromCharCode(unicodeCharCode);

• 聪明/为自己工作,你也可以(相当简单地)编写一个库来猜测某些keyCode返回的charCode的键盘布局.不要:)

替代方法:

使用隐藏(或至少离散)文本输入/文本框的一个建议是使用应用程序设置的重点.

当您的应用检测到按键/按键等时,您可以获取用户输入的值并在画布上呈现它.

当您已经捕获键盘事件时,处理组合应该很容易(如果需要).在某些方面甚至不需要,因为您只需要监视用户输入的输入长度(如果用户需要三键组合来输入角色,您的应用程序不必关心,您只需抓住结果).