Javascript 检测虚拟键盘与硬件键盘

我已经想了一段时间了，我想不出一个办法来处理它。有没有办法检测用户使用的是虚拟（软件）键盘还是传统（硬件）键盘

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

那么，你们有人对此有什么意见吗？
我的目标是Android、IOS和Windows平板电脑/手机

---

动机：（非常主观）

在为平板电脑/智能手机开发web应用程序时，我逐渐认识到，在许多情况下，使用JavaScript键盘而不是操作系统的软件键盘更容易

假设您想输入PIN码。而不是让键盘占据屏幕的一半：

软件（操作系统）键盘：

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

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

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

JavaScript键盘：

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

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

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

如果您需要处理大量输入，可能需要对输入进行叠加

div

，并使用软件键盘：

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

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

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

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

---

---

我一直在四处寻找，所以发现了这个帖子：。。。但这可能只在IOS中工作-不确定是否使用浏览器。

它可能没有检测到键盘。但我会尝试检测用户是否使用移动浏览器。因为拥有本机虚拟键盘的设备几乎一致运行在移动浏览器上

如果它们不是移动的，则显示您的标准输入字段

---

如果他们是移动的，不要显示输入字段（这样他们就不会得到虚拟键盘），而是有一个隐藏字段或列表，当他们单击pinpad的按钮时，该字段或列表会用jquery更新

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

HTML5表单属性可用于触发不同类型的键盘。例如，

、

和

将在iOS上触发适当的键盘类型（不确定Android/WinPho/other，但我想它也会这样做），允许用户更轻松地输入数据

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

---

您可以使用浏览器嗅探来检测移动浏览器，但不要忘记，这些浏览器仍然可以支持蓝牙键盘等功能。嗅探还有一个问题，那就是它几乎肯定会错过一些浏览器，并错误地检测到其他浏览器，因此你不应该仅仅依赖它。

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

但我确信，通过将

resize

事件与字段焦点配对，或通过监视

window.innerHeight

（或其他[a-z]*高度）并比较字段焦点前后的值，可以检测到大多数键盘

---

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

前几天我遇到了一个新问题，一个很好的答案可能会帮助解决你的键盘问题

本质上，它使用一个JQuery函数，如果能够创建触摸事件，该函数将返回一个布尔值

$(document).ready(function() {

    function hasTouch() {
        try {
           document.createEvent("TouchEvent");
           return true;
        } catch (e) {
           return false;
        }    
    }

    var touchPresent = hasTouch();
});

是一个服务器端框架，为您提供有关请求设备功能的大量信息。有了wurfel，您的应用程序将能够以优化的输出/标记为各种设备/设备组提供服务

最简单的场景之一是区分台式机、桌子和智能手机

---

数据库（xml文件）定期更新，官方api可用于java、php和.net

这是在Chrome/Safari等应用程序中最有效的解决方案。。从2017年11月20日起，在Android和iOS上，将检测具有

vh

高度单位（视区高度）的

div

的高度变化

然后，在输入/文本区域的任何模糊/焦点更改上，检查该

div

的高度是否比该模糊/焦点事件之前的高度低30%（以像素为单位）

CSS:

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);
});

$（“输入，文本区域”）.focus（函数（）{
setTimeout（函数（）{
如果（（initialHeight*0.7）>$（“#height div”）.height（））{//如果当前视口高度小于原始大小的70%，则表示键盘已打开
//在这里输入您的逻辑
}否则，如果（（initialHeight*0.7）$（“#height div”）.height（））{//如果当前视口高度小于原始大小的70%，则表示键盘已打开
//在这里输入您的逻辑
}否则，如果（（initialHeight*0.7）

这篇文章可能会对你有所帮助。我可以问一下这有什么关系吗？只是好奇为什么。就我个人而言，我会采取一种不同的方法——对于您给出的示例用例，我会阻止输入上的焦点事件，并始终显示JS键盘，同时监听键盘事件以捕获按下的数字键。这意味着在移动设备上不应显示虚拟键盘，而在PC和其他带有硬件键盘的设备上，用户仍可以使用虚拟键盘输入数字