如何确定移动浏览器中的软键盘是否触发了调整大小事件？

Question

关于软键盘的讨论很多,但我还没有找到解决问题的好方法.

我有一个调整大小的功能,如:

$(window).resize(function() {
    ///do stuff
});

我希望在所有调整大小事件中对该函数执行'stuff',除非它由软键盘触发.如何确定软键盘是否触发了调整大小？

Answer 1

我最近遇到了一些需要检查的问题.我设法像这样解决它:

$(window).on('resize', function(){
   // If the current active element is a text input, we can assume the soft keyboard is visible.
   if($(document.activeElement).attr('type') === 'text') {
      // Logic for while keyboard is shown
   } else {
      // Logic for while keyboard is hidden
   }
}

我只需要它用于文本输入,但显然可以扩展任何可能触发软键盘/数字选择器等的元素.

Answer 2

我刚刚修复了kirisu_kun的答案,使用prop()而不是attr():

$(window).on('resize', function(){
   // If the current active element is a text input, we can assume the soft keyboard is visible.
   if($(document.activeElement).prop('type') === 'text') {
      // Logic for while keyboard is shown
   } else {
      // Logic for while keyboard is hidden
   }
}

Answer 3

问题在于，如果活动元素处于焦点状态，则可以在不更改焦点的情况下仅通过关闭键盘来触发resize事件。因此，键盘将隐藏，但是代码将进入焦点状态。

Answer 4

这个问题依赖于有一种可靠的方法来检测屏幕键盘何时在移动设备上出现（或消失）。不幸的是，没有可靠的方法来检测这一点。类似的问题已经多次出现在 SO 上，并提出了各种技巧、技巧和变通方法（请参阅此答案以获取几个相关答案线程的链接）。

另请注意，屏幕键盘出现时并不总是触发调整大小事件（请参阅此答案）。

我的一般建议是检测触摸屏的存在 + 检测活动元素是否属于触发屏幕键盘的类型（类似于此答案）。但是，对于混合 Windows 设备（例如 Surface Pro），这种方法仍然会失败，有时屏幕键盘可能会在浏览器调整大小时出现，有时硬件键盘可能会在浏览器调整大小时使用。