javascript - 有没有办法让画布的键盘输入变得不那么复杂？

Question

我有一个网站 ( http://skyviewcafe.com/ )，它比移动设备更适合桌面使用，但我已经开始努力让它对移动设备更友好，至少对于平板电脑，如果不是手机的话。

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

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

当谈到屏幕键盘时，第一个挑战是让键盘出现，这似乎通常只能由标准文本input字段和textareas 触发。一个起初看起来很有希望的技巧，当我只有一个 iOS 平板电脑可以试验时，就是添加contenteditable="true"标签canvas，tabindex="0"很好的衡量标准。使用 时contenteditable，还需要一些非标准的 CSScaret-color: transparent来隐藏会出现在画布顶部的闪烁输入光标。

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

在这一点上，我想如果我需要使用一个不可见的输入字段，我还不如在 iOS 上使用相同的技术而忘记contenteditable. 但后来我尝试将 iOS 与物理键盘（两种：我自己的蓝牙键盘和智能连接器键盘）一起使用，发现键盘的箭头键没有发送任何键盘事件——箭头键确实在输入字段上工作，但必须直接挂接到输入字段，而不触发标准事件机制。

画布contenteditable="true"在 iOS 中确实获得了箭头键事件，所以现在我必须测试 Android，并且只对 Android 使用不可见的输入字段。

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

但在使用 Android 平板电脑（特别是运行 Android 7（Nougat）的平板电脑）进行测试时，该代码适得其反。键盘事件通常具有重复的时间戳，即使它们用于合法地单独的击键。因此，现在我的重复密钥拒绝代码对任何平台都应该是安全的，但只能将其视为 iOS 的特例。（顺便说一句，Android 时间戳问题在 Oreo 中已修复。）

关于 Android 的另一个奇怪的事情是大多数键盘事件并没有告诉你按下了什么键。只有像箭头键和 Enter 和 Backspace 这样的键被正确报告。数字和字母都返回key值为“Unidentified”，akeycode为 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

经过这么长的解释后，我的问题是：我是否遗漏了一些可以使事情变得不那么复杂的东西？是否有一个库或包可以处理我可以使用的这个问题，而不是通过发现所有这些不一致的键盘事件行为来搞砸我的方式？

此外，我还要问：有没有人知道我仍然缺少的键盘输入的任何其他特殊情况，我还没有处理？

标签： javascriptandroidhtmlioskeyboard-events