35

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

新的 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 - 不确定浏览器。

4

6 回答 6

22

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

HTML5 表单属性可用于触发不同类型的键盘。例如<input type="email">，<input type="number">和<input type="tel">会在 iOS 上触发适当的键盘类型（不确定 Android/WinPho/other，但我想它会这样做），允许用户更轻松地输入数据。

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

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

于 2012-11-12T08:02:13.323 回答
8

我不认为覆盖默认屏幕键盘是一个好主意，我建议按照 Jani 的建议进行 - 虚拟键盘也可以适应。

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

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

于 2012-11-15T21:48:50.820 回答
3

截至 2017 年 11 月 20 日，适用于 Chrome/Safari 等以及 Android 和 iOS 的最重要的教授解决方案将是检测div具有vh高度单位（视口高度）的 a 的高度变化

然后在输入/文本区域的任何模糊/焦点更改时，检查它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);
});
于 2017-11-20T16:20:42.007 回答
1

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

这是一个使用 jquery 的不错的小脚本

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

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

于 2012-11-12T01:07:13.913 回答
0

前几天我遇到了一个较新的问题，一个很好的答案可能对您的键盘问题有所帮助。

jquery 悬停超时（触摸）

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

$(document).ready(function() {

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

    var touchPresent = hasTouch();
});
于 2012-11-17T11:56:17.737 回答
0

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

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

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

于 2012-11-18T11:42:50.483 回答