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

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在为iPad编写一个Web应用程序（

-它是使用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检测虚拟键盘？ 的全部内容， 来源链接： utcz.com/qa/411841.html

回到顶部