在基于 Web 的 VNC 应用程序中支持多种键盘布局(3)

look_w

Web 技术和击键处理在桌面应用程序和 Web 应用程序之间的键盘事件处理差异，为全面实现基于 Web 的 VNC                客户端增加了一个复杂性层。该层是浏览器。桌面应用程序可更直接地访问底层硬件，而 Web 应用程序受到浏览器支持的限制。
浏览器中的击键处理基本知识现在出现的问题总数比 2000 年代初期更少，但浏览器之间仍然缺乏标准化。而且谈到键盘处理，差异可能很大。
浏览器提向 Web 应用程序提供了 3 种键盘事件：

• keydown：按下一个键。
• keyup：释放一个键：
• keypressed：按下一个字符键。

keydown 和 keyup                事件与操作系统处理的键盘事件类似。keypressed 事件仅在生成键符时发生。Shift 或 Alt 等特殊键不会生成                keypressed 事件。Web 应用程序要可靠地获得生成的字符，则必须依靠                keypressed 事件。
每个事件拥有至少以下 3 个属性：

• keyCode 属性指按下的键，不含修饰键，比如 Shift 或 Alt。当按下 a 键时，甚至在生成的键符为 A                    时，keyCode 也是相同的。许多网站和 Web 教程会误导性地将此属性称为键的扫描码。
• charCode 属性是键事件（如果有）生成的键符的 ASCII 码。
• which 属性返回的值在大多数时候与 keyCode 相同，提供按下的键的                    Unicode 值。

可以使用                  页面查看在按下某个键时键盘事件有何行为。例如，按下左 Shift 键会得到：

keydown keyCode=16 which=16 charCode=0 keyup keyCode=16 which=16 charCode=0

按下 a 键会得到：

keydown keyCode=65 (A) which=65 (A) charCode=0 keypress keyCode=0 which=97 (a) charCode=97 (a) keyup keyCode=65 (A) which=65 (A) charCode=0

按住 a 键不放会得到：

keydown keyCode=65 (A) which=65 (A) charCode=0 keypress keyCode=0 which=97 (a) charCode=97 (a) keydown keyCode=65 (A) which=65 (A) charCode=0 keypress keyCode=0 which=97 (a) charCode=97 (a) keydown keyCode=65 (A) which=65 (A) charCode=0 keypress keyCode=0 which=97 (a) charCode=97 (a) keyup keyCode=65 (A) which=65 (A) charCode=0

这种对键盘事件的浏览器支持使实现 VNC Web 客户端成为可能。一些 VNC 客户端项目已开始试验解决多键盘布局问题。但 noVNC 项目没有实现                QEMU VNC 扩展来处理该问题，所以在 2015 年，我们决定尝试一下。毫无疑问，我曾认为解决该问题仅需使用                keyCode（浏览器提供的所谓的扫描码）并将其放在 QEMU 扩展的 KeyEvent                消息中。哪里可能出错了？
keyCode，所谓的扫描码在 noVNC 中使用 keyCode 属性实现 QEMU 扩展，没有解决键盘布局问题。我了解到，尽管                keyCode 属性拥有定位行为，但它依赖于布局，因此无法在 QEMU KeyEvent                消息中用作键码。
下面的简单试验展示了不同布局中的 keyCode 属性的行为。我们再次使用                  页面来展示键盘事件，以下是在美国布局键盘中按下 q 键时的输出：

keydown keyCode=81 (Q) which=81 (Q) charCode=0 keypress keyCode=0 which=113 (q) charCode=113 (q) keyup keyCode=81 (Q) which=81 (Q) charCode=0

将布局更改为法国，以下是同一个键的输出：

keydown  keyCode=65  (A)   which=65  (A)   charCode=0    keypress keyCode=0         which=97  (a)   charCode=97  (a) keyup    keyCode=65  (A)   which=65  (A)   charCode=0

请注意，当布局发生更改时，keyCode 值从 81 变为了 65。在法国 AZERTY 布局键盘中，第三行第二个键是                a，keyCode 反映了这一布局变化。
在我尝试在 noVNC 项目中实现 QEMU 扩展时，浏览器的 JavaScript 中没有描述物理位置的属性 — a                键的不依赖于布局的键码。所以，我必须暂时搁置这项工作。
KeyboardEvent.code 成为了救星2016 年初，  浏览器稳定版 48 中包含一个名为 code 的新                KeyboardEvent 属性。（  之前已引入此属性，Opera 随后也提供了它。）Mozilla Developer Network                对此属性进行了如下描述：

KeyboardEvent.code                包含一个标识所按下的实体键的字符串。该值不受当前键盘布局或修饰键状态的影响，所以特定的键将始终返回相同的值。

借助这个新属性，我可以继续并完成我的实现。