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

Question

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

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

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

原文由 LKM 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 上测试过了，它似乎工作正常。

原文由 LKM 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

您可以使用 focusout 事件来检测键盘关闭。就像模糊，但是气泡。它会在键盘关闭时触发（当然在其他情况下也会触发）。在 Safari 和 Chrome 中，只能使用 addEventListener 注册事件，而不能使用传统方法。这是我用来在键盘关闭后恢复 Phonegap 应用程序的示例。

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

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

原文由 Per Quested Aronsson 发布，翻译遵循 CC BY-SA 3.0 许可协议