HTML5; 在Javascript中检测物理键盘的存在

Question

检测用户是否拥有物理键盘的最可靠方法是什么？

一个想法是，由于没有物理键盘window.onkeydown可能是undefined （而不是null ）。 但由于虚拟键盘，我认为情况并非如此。 虽然我没有测试。

如果用户没有键盘，我的目标是将在线计时器的input[type='number']替换为轮选择器。

Answer 1

我看到两种方法。

第一种方法是监听每个鼠标和键盘事件。 拥有鼠标的用户很可能也拥有键盘。 访问网站的用户很可能会移动鼠标。

第二种方法是检查用户代理以读取正在运行的操作系统，并假设 Android 和 iOS 设备没有任何键盘。 对于 Windows 8，我看不出用户代理如何提供帮助，因为 Windows 8 可在平板电脑和台式机/笔记本电脑上运行。

不过，我宁愿有一个更优雅的解决方案。

Answer 2

对于 Microsoft Surface 等配备键盘、鼠标和触摸屏的设备，这会变得非常棘手。 您可以在任何给定时间混合所有 3 种输入模式，或添加另一种输入法，如手写笔。

Microsoft 正在采用将输入事件抽象为“指针事件”的方法。 该模型已提交给 W3C 。 这应该让您了解管理输入的趋势。

尽管如此，我发现查看触摸是否可用并在假设用户至少在某些时候使用触摸输入的情况下进行操作是很方便的。 这可能导致设计决策消除完全不利于触摸的东西，即使这可能意味着损害鼠标/键盘的功能。

在您的特定情况下，我会仔细研究您是否甚至需要用自定义控件替换input[type=number] 。 大多数触摸设备都相当现代，并且许多具有标准 HTML 输入的自定义、触摸友好版本。

还要记住本机控件可能很好地支持“开箱即用”的可访问性方案。

如果您决定实现自定义控件，那么我建议检测触摸功能并显示您的自定义控件是否存在其他输入机制。 这意味着确保自定义控件（至少）对触摸/键盘/鼠标友好。

这是我当前的触摸测试（免责声明它明天可能会中断，并且肯定没有在每台设备上进行测试）：

var supportsTouch = ("ontouchstart" in window) || window.navigator.msMaxTouchPoints > 0;

Answer 3

检测触摸屏并显示特殊小部件更可靠； 为了可访问性，只需确保键盘仍然可以与您喜欢的小部件一起使用。

Answer 4

您可以通过检查操作系统甚至屏幕尺寸来确定键盘类型。 Android、iOS 和所有小屏幕设备往往没有物理键盘。