检测虚拟键盘与硬件键盘

Question

我一直在考虑这个问题，但我想不出办法来处理它。有什么方法可以检测用户是使用虚拟（软件）键盘还是传统（硬件）键盘？

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

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

---

动机：（非常主观）

在为平板电脑/智能手机开发 Web 应用程序时，我了解到在许多情况下使用 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    |
|                |
|----------------|

但如果用户有自己的硬件键盘，我们希望在适当的位置进行内联编辑。

---

我一直在寻找这个帖子，发现了这个帖子：iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari? ...但是这个接缝只适用于 IOS - 不确定浏览器。

Answer 1

截至 2017 年 11 月 20 日，适用于 Chrome/Safari 等以及 Android 和 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);
});

Answer 2

前几天我遇到了一个新问题，一个很好的答案可能有助于解决您的键盘问题。

Time out on jquery hover (touch)

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

$(document).ready(function() {

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

    var touchPresent = hasTouch();
});

Answer 3

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

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

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

Answer 4

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

但我确信可以通过 resize 事件与字段焦点配对或通过监视 window.innerHeight（或其他一些 [az]*Height）并比较字段前后的值来检测大多数键盘重点。

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

Answer 5

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

HTML5 表单属性可用于触发不同类型的键盘。例如，<input type="email">、<input type="number"> 和 <input type="tel"> 将在 iOS 上触发相应的键盘类型（不确定 Android/WinPho/other，但我想它也一样），允许用户输入更多数据很容易。

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

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

Answer 6

它可能没有检测到键盘。但我会尝试检测用户是否在移动浏览器上。由于具有原生虚拟键盘的设备几乎一致地运行在移动浏览器上。

Here is a nice little script that uses jquery

如果它们不是移动设备，请显示您的标准输入字段。

如果他们是移动设备，则不要显示输入字段（因此他们不会获得虚拟键盘），而是有一个隐藏字段或列表，当他们单击您的 pinpad 按钮时会使用 jquery 进行更新。