iPad Web App：在Safari中使用JavaScript检测虚拟键盘？
我正在为iPad编写一个Web应用程序（ 不是常规的App Store应用程序 - 它使用HTML，CSS和JavaScript编写）。 由于键盘填满了屏幕的一大部分，因此在显示键盘时更改应用程序的布局以适合剩余空间是有意义的。 但是，我发现无法检测何时或是否显示键盘。
我的第一个想法是假设当文本字段有焦点时键盘是可见的。 但是，当外部键盘连接到iPad时，虚拟键盘在文本字段获得焦点时不显示。
在我的实验中，键盘也不会影响任何DOM元素的高度或滚动高度，并且我没有找到专有事件或属性来指示键盘是否可见。
我找到了一个可行的解决方案，虽然它有点难看。 它也不适用于任何情况，但它对我有用。 由于我将用户界面的大小调整为iPad的窗口大小，用户通常无法滚动。 换句话说，如果我设置窗口的scrollTop，它将保持在0。
另一方面，如果显示键盘，则突然滚动工作。 所以我可以设置scrollTop，立即测试它的值，然后重置它。 以下是使用jQuery在代码中看起来如何：
$(document).ready(function(){
$('input').bind('focus',function() {
$(window).scrollTop(10);
var keyboard_shown = $(window).scrollTop() > 0;
$(window).scrollTop(0);
$('#test').append(keyboard_shown?'keyboard ':'nokeyboard ');
});
});
通常情况下，您会希望这对用户不可见。 不幸的是，至少在模拟器中运行时，iPad可见（尽管很快）会再次上下滚动。 至少在某些特定情况下，它仍然有效。
我已经在iPad上测试过了，它似乎工作正常。
您可以使用聚焦事件来检测键盘解除。 这就像模糊，但泡沫。 它会在键盘关闭时触发（当然还有其他情况）。 在Safari和Chrome中，事件只能使用addEventListener注册，而不能使用传统方法注册。 这是我用来在解除键盘后恢复Phonegap应用的一个例子。
document.addEventListener('focusout', function(e) {window.scrollTo(0, 0)});
如果没有此代码段，应用程序容器将停留在向上滚动的位置，直到页面刷新。
也许稍微好一点的解决方案是绑定（在我的情况下与jQuery）各种输入字段上的“模糊”事件。
这是因为当键盘消失时，所有表单字段都模糊不清。 所以对于我的情况来说，这种切断解决了问题。
$('input, textarea').bind('blur', function(e) {
// Keyboard disappeared
window.scrollTo(0, 1);
});
希望能帮助到你。 米歇尔
链接地址: http://www.djcxy.com/p/41809.html上一篇: iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?