javascript 检测虚拟键盘与硬件键盘
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13270659/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detect virtual keyboard vs. hardware keyboard
提问by andlrc
I have been thinking about this a while now, and I can't figure a way to deal with it. Is there any way to detect if the user uses a virtual (software) keyboard or a traditional (hardware) keyboard?
我一直在思考这个问题，我想不出办法来处理它。有什么方法可以检测用户使用的是虚拟（软件）键盘还是传统（硬件）键盘？
The new Windows Surface has its own keyboard in the cover, and for Android / iPad there are a ton of different bluetooth keyboards.
新的 Windows Surface 有自己的键盘，Android / iPad 有很多不同的蓝牙键盘。
So, do any of you have any input about this?
I'm aiming for Android, IOS & Windows Tablet/Phone.
那么，你们中有没有人对此有任何意见？
我的目标是 Android、IOS 和 Windows 平板电脑/手机。
Motivation:(very subjective)
动机：（非常主观）
When developing web applications for tablet/smartphone I have come to the understanding that it's easier - in many situations - to use a JavaScript keyboard instead of the OS's software keyboard.
在为平板电脑/智能手机开发 Web 应用程序时，我了解到在许多情况下使用 JavaScript 键盘比操作系统的软件键盘更容易。
Lets say you want to enter a PIN code. Instead of having a keyboard filling half of the screen:
假设您要输入 PIN 码。而不是让键盘填满屏幕的一半：
Software (OS) keyboard:
软件 (OS) 键盘：
|----------------|
| [ input] |
| |
|----------------|
| 1 2 3 4 5 |
| 6 7 8 9 0 |
|----------------|
JavaScript keyboard:
JavaScript 键盘：
|----------------|
| [ input] |
| | 1 2 3| |
| | 4 5 6| |
| |_7_8_9| |
| |
| |
|----------------|
If you need to handle a lot of inputs, maybe you want to make an overlaying divwith the inputs and use the software keyboard:
如果您需要处理大量输入，也许您想对div输入进行叠加并使用软键盘：
|----------------|
| P1 P2 P3 P4 |
| [inp 1][inp 2] |
|----------------|
| KEYBOARD |
| |
|----------------|
But if the user has their own hardware keyboard, we want to make the edit inline in place.
但是如果用户有自己的硬件键盘，我们希望在适当的位置进行内联编辑。
I have been looking around SO and found this post: iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?... but this seams to only work in IOS - not sure about browser.
我一直在环顾四周，发现了这篇文章：iPad Web App：在 Safari 中使用 JavaScript 检测虚拟键盘？...但这接缝只能在 IOS 中工作 - 不确定浏览器。
采纳答案by naugtur
I don't think overriding default onscreen keyboard is a good idea, and I'd recommend going with what Jani suggested - virtual keyboards adapt too.
我不认为覆盖默认的屏幕键盘是一个好主意，我建议按照 Jani 的建议去做——虚拟键盘也能适应。
But I'm sure it is possible to detect most keyboards with the resizeevent paired with focus on the field or by monitoring window.innerHeight(or some other [a-z]*Height) and comparing value before and after field focus.
但是我确信可以通过将resize事件与焦点放在场上或通过监视window.innerHeight（或其他一些 [az]*Height）并比较场焦点前后的值来检测大多数键盘。
This is a weird case of feature detection, so it will need plenty of experimentation. I wouldn't do it if I were you.
这是特征检测的一个奇怪案例，因此需要大量实验。如果我是你，我就不会这样做。
回答by Jani Hartikainen
I think the best approach would be to combine HTML5 form attributes with an optional virtual keyboard link.
我认为最好的方法是将 HTML5 表单属性与可选的虚拟键盘链接结合起来。
HTML5 form attributes can be used to trigger different types of keyboards. For example, <input type="email">, <input type="number">and <input type="tel">will trigger the appropriate keyboard types on iOS (not sure about Android/WinPho/other, but I would imagine it does the same), allowing the user to input the data more easily.
HTML5 表单属性可用于触发不同类型的键盘。例如<input type="email">，<input type="number">并且<input type="tel">将触发iOS上相应的键盘类型（不知道的Android / WinPho /其他，但我想它确实是相同的），允许用户输入数据更容易。
If you want, you could additionally offer a button to trigger a custom numpad under the text field for older non-HTML5 compliant mobile browsers. Those will display the new HTML5 fields as standard text fields.
如果需要，您还可以提供一个按钮，用于在较旧的非 HTML5 兼容移动浏览器的文本字段下触发自定义小键盘。这些将把新的 HTML5 字段显示为标准文本字段。
You can use browser sniffing to detect mobile browsers, but don't forget that those can still support things such as bluetooth keyboards. Sniffing additionally has the problem that it will almost certainly miss some browsers, and incorrectly detect others, thus you shouldn't rely on it solely.
您可以使用浏览器嗅探来检测移动浏览器，但不要忘记那些仍然可以支持蓝牙键盘之类的东西。嗅探还有一个问题，它几乎肯定会错过某些浏览器，并错误地检测到其他浏览器，因此您不应该仅仅依赖它。
回答by TBE
The most bullet prof solution that works across Chrome/Safari etc.. and on both Android and iOS as of 20-nov-2017 will be to detect a change in the height of a divthat has a vhheight units (viewport height)
截至 2017 年 11 月 20 日，适用于 Chrome/Safari 等以及 Android 和 iOS 的最具子弹性的解决方案是检测div具有vh高度单位（视口高度）的高度的变化
Then on any blur/focus change of an input/textarea check if that divnow has a height of 30% less (in pixels) than it used to have before that blur/focus event.
然后在输入/文本区域的任何模糊/焦点更改时，检查它div现在的高度是否比在该模糊/焦点事件之前低 30%（以像素为单位）。
CSS:
CSS：
#height-div{height: 10vh;}
jQuery:
jQuery：
$(document).ready(function() {
var initialHeight = $("#height-div").height();//gives current height in pixels! We save it for later comparisons
}
Now here is the magic:
现在这是魔法：
$("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);
});
回答by Malkus
It may not be detecting the keyboard. But I would try detecting if the user is on a mobile browser. Since the devices that have native virtual keyboards almost unanimously run on mobile browsers.
它可能没有检测到键盘。但我会尝试检测用户是否使用移动浏览器。由于具有本机虚拟键盘的设备几乎一致在移动浏览器上运行。
Here is a nice little script that uses jquery
If they aren't mobile present your standard input field.
如果他们不是移动显示您的标准输入字段。
If they are mobile do not display the input field (So they don't get the virtual keyboard), instead have a hidden field or list that gets updated with jquery when they click the buttons for your pinpad.
如果他们是移动设备，则不显示输入字段（因此他们不会获得虚拟键盘），而是有一个隐藏字段或列表，当他们单击您的密码键盘按钮时，这些字段或列表会使用 jquery 进行更新。
回答by Malkus
I came across a newer question the other day and a great answer that may help with your keyboard issue.
前几天我遇到了一个较新的问题，一个很好的答案可能有助于解决您的键盘问题。
Time out on jquery hover (touch)
Essentially it uses a JQuery function that returns a boolean if it was able to create a touch event.
本质上，它使用一个 JQuery 函数，如果它能够创建一个触摸事件，它会返回一个布尔值。
$(document).ready(function() {
function hasTouch() {
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}
var touchPresent = hasTouch();
});
回答by Lukas Winzenried
WURFLis a serverside framework that offers you a lot of information about the requesting device's capabilities. With wurfel in place, your application will able to serve the various devices / device groups with optimised output/markup.
WURFL是一个服务器端框架，可为您提供有关请求设备功能的大量信息。有了 wurfel，您的应用程序将能够以优化的输出/标记为各种设备/设备组提供服务。
One of the simpliest scenarious would be to distiguish between desktops, tables and smartphones.
最简单的场景之一是区分台式机、桌子和智能手机。
The database (xml file) is updated regularly and official api's are available for java, php and .net
数据库（xml 文件）定期更新，官方 api 可用于 java、php 和 .net
