iPad Web App：在Safari中使用JavaScript检测虚拟键盘？

概述我正在为iPad编写一个网络应用程序(而不是普通的App Store应用程序 – 它是使用HTML，CSS和JavaScript编写的)。由于键盘填满了屏幕的一大部分，因此在显示键盘时更改应用程序的布局以适应剩余空间是有意义的。但是，我没有找到任何方法来检测键盘是否显示。 我的第一个想法是假设当文本字段具有焦点时键盘是可见的。但是，当外部键盘连接到iPad时，当文本字段接收焦点时，虚拟键盘不会显示 我正在为iPad编写一个网络应用程序(而不是普通的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上，它似乎工作正常。

总结

以上是内存溢出为你收集整理的iPad Web App：在Safari中使用JavaScript检测虚拟键盘？全部内容，希望文章能够帮你解决iPad Web App：在Safari中使用JavaScript检测虚拟键盘？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。