有没有一种方法可以使键盘输入到画布的操作变得简单？

Question

我有一个网站（http://skyviewcafe.com/）比移动设备更适合台式机使用，但是我已经开始致力于使其更适合移动设备使用，至少对于平板电脑（如果不是手机）更是如此。 / p>

要处理的一件不必要的事情是使基于画布的输入小部件在移动设备上工作。

特别是，我发现iOS和Android之间存在显着差异，并且在每个平台上，屏幕键盘和外部物理键盘之间都存在显着差异。

在屏幕上使用键盘时，第一个挑战是使键盘完全出现，而看起来似乎只有标准文本input字段和textarea会触发这些东西。起初，当我只有一台iOS平板电脑进行试验时，一个似乎很有希望的技巧是将contenteditable="true"添加到canvas标签中，并加上tabindex="0"作为衡量标准。使用contenteditable（一种非标准CSS）时，还需要caret-color: transparent来隐藏将出现在画布顶部的闪烁的输入光标。

通过上述更改，在iOS上，我可以点击canvas，然后根据需要弹出屏幕键盘。但是，当我终于有了一款可测试的Android平板电脑时，却没有这种运气。我需要一种完全不同的技术：创建一个不可见的文本输入字段。

在这一点上，我认为如果需要使用不可见的输入字段，那么我最好对iOS使用相同的技术，而不必担心contenteditable。但是后来我尝试将iOS与物理键盘（两种类型：我自己的蓝牙键盘和智能连接器键盘）一起使用，发现键盘的箭头键未发送任何键盘事件-箭头键在输入字段上起作用，但是必须直接挂钩到输入字段中，而不触发标准事件机制。

带有contenteditable="true"的画布的确在iOS中获得了箭头键事件，因此现在我不得不测试Android，并且仅对Android使用不可见的输入字段。

iOS物理键盘上出现的另一个问题：两次按键事件。有时一次按下某个键会生成两个按下事件，它们的时间戳几乎相同，甚至完全相同，并且第二个按下事件的repeat标志都没有设置为true。因此，我不得不编写代码以通过检查事件时间戳来检测和拒绝这些额外的事件。

但是，当使用Android平板电脑（特别是运行Android 7（牛轧糖）的平板电脑）进行测试时，该代码适得其反。键盘事件经常有重复的时间戳记，即使它们是用于合法分开的击键。因此，现在我重复的密钥拒绝代码（对于任何平台都应该是安全的）只应视为iOS的特殊情况。 （顺便说一下，Android时间戳问题在Oreo中得到了解决。）

关于Android的另一个奇怪的事情是，大多数键盘事件并没有告诉您按下了什么键。仅正确报告了箭头键，Enter和Backspace之类的键。数字和字母全都返回，其key值为“ Unidentified”，并且keycode为229。要知道实际键入的内容，还必须在键盘上捕获input个事件。不可见的输入字段，然后从该输入字段的值中拉出最后键入的字符。

必须处理的其他问题：iOS报告的箭头键带有事件key值，例如“ UIKeyInputLeftArrow”而不是“ ArrowLeft”。在相关的非移动不一致问题中，Internet Explorer仅将箭头键报告为“左”等，而名称中没有“箭头”。

我为处理所有键盘异常而编写的代码可以在这里找到：

https://github.com/kshetline/sky-view-cafe-astronomy/blob/master/src/app/widgets/ks-sequence-editor/ks-sequence-editor.component.ts

https://github.com/kshetline/sky-view-cafe-astronomy/blob/master/src/app/widgets/ks-sequence-editor/ks-sequence-editor.component.scss

https://github.com/kshetline/sky-view-cafe-astronomy/blob/master/src/app/widgets/ks-sequence-editor/ks-sequence-editor.component.html

https://github.com/kshetline/ks-util/blob/master/src/ks-util.ts

经过这么长时间的解释之后，我的问题是：我是否错过了一些可能使事情变得不那么复杂的事情？有没有可以用来解决这个问题的库或程序包，而不是通过发现所有不一致的键盘事件行为来弄乱我的方式？

此外，我还会问：有人知道我还没有处理的其他键盘输入特殊情况吗？