检测虚拟键盘与硬件键盘

Question

我已经想了很长时间了，我想不出解决这个问题的方法。是否有任何方法检测用户是否使用虚拟(软件)键盘或传统(硬件)键盘？

新的Windows在封面上有自己的键盘，而安卓/ iPad则有大量不同的蓝牙键盘。

那么，你们中有人对此有什么意见吗？

我的目标是Android、IOS和Windows /Phone。

动机：(非常主观)

在为平板/智能手机开发网络应用程序时，我已经了解到，在许多情况下，使用JavaScript键盘比使用操作系统的软件键盘更容易。

假设您想输入一个PIN代码。与其用键盘填充屏幕的一半，不如：

软件键盘：

|----------------|
|    [ 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    |
|                |
|----------------|

但是，如果用户有自己的硬件键盘，我们想要使编辑内联到位。

我环顾四周，发现了这样的帖子：Safari应用程序:在iPad中使用JavaScript检测虚拟键盘？ .但是这个接缝只适用于IOS --对浏览器不太确定。

Answer 1

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

但我确信，通过resize事件与字段上的焦点匹配，或者通过监视window.innerHeight (或其他a*高度)并比较字段焦点前后的值，可以检测大多数键盘。

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

Answer 2

我认为最好的方法是将HTML5表单属性与一个可选的虚拟键盘链接结合起来。

HTML5窗体属性可用于触发不同类型的键盘。例如，<input type="email">、<input type="number">和<input type="tel">将在iOS上触发适当的键盘类型(对于Android/WinPho/other不确定，但我可以想象它也会这样做)，从而使用户能够更容易地输入数据。

如果您愿意，您还可以为非HTML5 5兼容的老移动浏览器提供一个按钮来触发文本字段下的自定义数字垫。这些字段将显示新的HTML5字段为标准文本字段。

您可以使用浏览器嗅探来检测移动浏览器，但不要忘记，这些浏览器仍然可以支持蓝牙键盘之类的功能。此外，嗅探还存在这样的问题，即它几乎肯定会错过一些浏览器，并且错误地检测到其他浏览器，因此您不应该只依赖它。

Answer 3

适用于Chrome/Safari等的最主要的解决方案。到2017年11月20日至11月20日，安卓和iOS都将检测到具有vh高度单位的div的高度变化(视口高度)。

然后，在输入/文本区域的任何模糊/焦点更改上，检查该div现在的高度是否比该模糊/焦点事件之前的高度低30% (以像素为单位)。

CSS：

#height-div{height: 10vh;}

jQuery：

$(document).ready(function() {
    var initialHeight = $("#height-div").height();//gives current height in pixels! We save it for later comparisons 
}

现在，这是魔法：

$("input, textarea").focus(function(){
        setTimeout(function(){
            if((initialHeight*0.7) > $("#height-div").height()){//if the current viewport height is smaller than 70% of the original size, it means that the keyboard is up
                //ENTER YOUR LOGIC HERE
            }else if((initialHeight*0.7) < parent.$submit.height()){//if the current viewport height is larger than 70% of the original size, it means that the keyboard is down
            //ENTER YOUR LOGIC HERE
            }
        },500);
});

$("input, textarea").blur(function(){
        setTimeout(function(){
            if((initialHeight*0.7) > $("#height-div").height()){//if the current viewport height is smaller than 70% of the original size, it means that the keyboard is up
                //ENTER YOUR LOGIC HERE
            }else if((initialHeight*0.7) < parent.$submit.height()){//if the current viewport height is larger than 70% of the original size, it means that the keyboard is down
            //ENTER YOUR LOGIC HERE
            }
        },500);
});