iPad Web App:在 Safari 中使用 JavaScript 检测虚拟键盘?

我正在为iPad编写一个Web应用程序(不是常规的App Store应用程序 - 它是使用HTML,CSS和JavaScript编写的)。由于键盘填满了屏幕的很大一部分,因此在显示键盘时更改应用的布局以适合剩余空间是有意义的。但是,我发现没有办法检测何时或是否显示键盘。

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

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


答案 1

我找到了一个有效的解决方案,尽管它有点丑陋。它也不会在每种情况下都有效,但它对我有用。由于我正在使用户界面的大小适应iPad的窗口大小,因此用户通常无法滚动。换句话说,如果我设置窗口的rollapTop,它将保持在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上测试过,它似乎工作正常。


答案 2

可以使用焦点事件来检测键盘关闭。这就像模糊,但泡沫。当键盘关闭时,它会触发(当然,在其他情况下也会触发)。在 Safari 和 Chrome 中,事件只能使用 addEventListener 注册,而不能使用旧方法注册。以下是我用于在键盘关闭后恢复 Phonegap 应用的示例。

 document.addEventListener('focusout', function(e) {window.scrollTo(0, 0)});

如果没有此代码段,应用容器将保持在向上滚动的位置,直到页面刷新。