检测虚拟键盘与硬件键盘

Question

我一直在思考这个问题,我无法想办法解决这个问题.有没有办法检测用户是使用虚拟(软件)键盘还是传统(硬件)键盘？

新的Windows Surface在封面上有自己的键盘,对于Android/iPad,有大量不同的蓝牙键盘.

那么,你们中有人对此有任何意见吗？
我的目标是Android,IOS和Windows平板电脑/手机.

---

动机:(非常主观)

在开发平板电脑/智能手机的网络应用程序时,我已经认识到在许多情况下使用JavaScript键盘而不是操作系统的软件键盘会更容易.

假设您要输入PIN码.而不是让键盘填满屏幕的一半:

软件(OS)键盘:

|----------------|
|    [ input]    |
|                |
|----------------|
|  1  2  3  4  5 |
|  6  7  8  9  0 |
|----------------|

JavaScript键盘:

|----------------|
|    [ input]    |
|    | 1 2 3|    |
|    | 4 5 6|    |
|    |_7_8_9|    |
|                |
|                |
|----------------|

如果您需要处理大量输入,可能需要对输入进行叠加div并使用软件键盘:

|----------------|
| P1 P2    P3 P4 |
| [inp 1][inp 2] |
|----------------|
|    KEYBOARD    |
|                |
|----------------|

但是如果用户有自己的硬件键盘,我们希望将编辑内联到位.

---

我一直在寻找SO并发现这篇文章:iPad Web App:在Safari中使用JavaScript检测虚拟键盘？...但这种接缝仅适用于IOS - 不确定浏览器.

Answer 1

我认为最好的方法是将HTML5表单属性与可选的虚拟键盘链接相结合.

HTML5表单属性可用于触发不同类型的键盘.例如<input type="email">,<input type="number">并且<input type="tel">将触发iOS上相应的键盘类型(不知道的Android/WinPho /其他,但我想它确实是相同的),允许用户输入数据更容易.

如果需要,您还可以在文本字段下为旧的非HTML5兼容移动浏览器提供一个按钮来触发自定义小键盘.这些将显示新的HTML5字段作为标准文本字段.

您可以使用浏览器嗅探来检测移动浏览器,但不要忘记那些仍然可以支持蓝牙键盘之类的东西.嗅探还有一个问题,就是它几乎肯定会错过一些浏览器,并且错误地检测其他浏览器,因此你不应该单独依赖它.

Answer 2

我不认为覆盖默认的屏幕键盘是一个好主意,我建议使用Jani建议的 - 虚拟键盘也适应.

但我确信可以检测大多数键盘,其中resize事件与场焦点配对或通过监视window.innerHeight(或其他[az]*高度)并比较场焦点前后的值.

这是一个奇怪的特征检测案例,因此需要大量的实验.如果我是你,我不会这样做.