javascript - iPad 网络应用程序 : Detect Virtual Keyboard Using JavaScript in Safari?

Question

我正在为 iPad 编写一个网络应用程序(不是普通的 App Store 应用程序 - 它是使用 HTML、CSS 和 JavaScript 编写的)。由于键盘占据了屏幕的很大一部分，因此在显示键盘时更改应用程序的布局以适应剩余空间是有意义的。但是，我发现无法检测键盘何时或是否显示。

我的第一个想法是假设当文本字段具有焦点时键盘是可见的。但是，当将外部键盘连接到 iPad 时，当文本字段获得焦点时，虚拟键盘不会显示。

在我的实验中，键盘也不会影响任何 DOM 元素的高度或滚动高度，并且我没有发现表明键盘是否可见的专有事件或属性。

Answer 1

我找到了一个可行的解决方案，虽然它有点难看。它也不会在所有情况下都有效，但它对我有用。由于我正在调整用户界面的大小以适应 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 上进行了测试，它似乎工作正常。