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

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

我一直在寻找并发现这篇文章：iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari? ...但这种接缝仅适用于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] *高度）并比较值在场焦点之前和之后。

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

Answer 3

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

Here is a nice little script that uses jquery

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

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

Answer 4

前几天我遇到了一个更新的问题，这个问题可能对你的键盘问题有帮助。

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 5

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

最简单的风格之一就是在台式机，桌子和智能手机之间进行分离。

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

Answer 6

从2017年20月20日开始，Chrome / Safari等适用于Android和iOS的大多数子弹教程解决方案将检测具有{div的{{1}}高度的变化{1}}高度单位（视口高度）

然后在输入/文本区域的任何模糊/焦点变化上检查vh现在的高度是否比该模糊/焦点事件之前的高30％（以像素为单位）。

CSS：

div

jQuery的：

#height-div{height: 10vh;}

现在是魔术：

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

检测虚拟键盘与硬件键盘

6 个答案: