jQuery Mobile如何检测是否打开移动虚拟键盘

Question

在移动设备中，当我打开页面并选择一个输入框时，虚拟键盘是打开的，我想抓住此事件来完成我的工作。

在移动浏览器中是否有任何事件处理来实现此操作？

因此，当键盘打开时，我想运行自定义功能以显示/隐藏页面中的某些UI块。

谢谢

Answer 1

第一个jQuery Mobile对于此情况没有任何预定义的事件处理程序。您将需要弄清楚自己的方式。

android

当虚拟键盘打开时，它会启动Windows调整大小事件。因此，您可以检查Windows宽度和高度是否更改以检测键盘的总和。

ios

这不会启动调整大小的事件，因此只需绑定焦点和模糊事件，如@ramizwachtler所述

所以我在这里有一些代码：

您只需将自己的处理代码添加到onKeyboardOnOff()函数中。

function onKeyboardOnOff(isOpen) {
    // Write down your handling code
    if (isOpen) {
        // keyboard is open
    } else {
        // keyboard is closed
    }
}
var originalPotion = false;
$(document).ready(function(){
    if (originalPotion === false) originalPotion = $(window).width() + $(window).height();
});
/**
 * Determine the mobile operating system.
 * This function returns one of 'iOS', 'Android', 'Windows Phone', or 'unknown'.
 *
 * @returns {String}
 */
function getMobileOperatingSystem() {
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;
      // Windows Phone must come first because its UA also contains "Android"
    if (/windows phone/i.test(userAgent)) {
        return "winphone";
    }
    if (/android/i.test(userAgent)) {
        return "android";
    }
    // iOS detection from: http://stackoverflow.com/a/9039885/177710
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        return "ios";
    }
    return "";
}
function applyAfterResize() {
    if (getMobileOperatingSystem() != 'ios') {
        if (originalPotion !== false) {
            var wasWithKeyboard = $('body').hasClass('view-withKeyboard');
            var nowWithKeyboard = false;
                var diff = Math.abs(originalPotion - ($(window).width() + $(window).height()));
                if (diff > 100) nowWithKeyboard = true;
            $('body').toggleClass('view-withKeyboard', nowWithKeyboard);
            if (wasWithKeyboard != nowWithKeyboard) {
                onKeyboardOnOff(nowWithKeyboard);
            }
        }
    }
}
$(document).on('focus blur', 'select, textarea, input[type=text], input[type=date], input[type=password], input[type=email], input[type=number]', function(e){
    var $obj = $(this);
    var nowWithKeyboard = (e.type == 'focusin');
    $('body').toggleClass('view-withKeyboard', nowWithKeyboard);
    onKeyboardOnOff(nowWithKeyboard);
});
$(window).on('resize orientationchange', function(){
    applyAfterResize();
});

Answer 2

如本答案所建议的，您可以使用window.visualViewport。

Visual Viewport是屏幕的视觉部分，不包括屏幕键盘，捏Zoom区域以外的区域或任何其他不会随页面尺寸扩展的屏幕上的文物。

我测量了键盘打开的几个设备上window.screen.height和window.visualViewport.height之间的差异，它始终超过300px。

这样您就可以做这样的事情：

const listener = () => {
  const MIN_KEYBOARD_HEIGHT = 300 // N.B.! this might not always be correct
    
  const isMobile = window.innerWidth < 768
  const isKeyboardOpen = isMobile 
    && window.screen.height - MIN_KEYBOARD_HEIGHT > window.visualViewport.height
}
window.visualViewport.addEventListener('resize', listener)

您应该记住，在所有情况下，该解决方案都可能不起作用，因为它在很大程度上依赖于所有设备键盘的高度大致相同的假设。当然，您可以调整硬编码的值，但是，您可以看到，这不是防弹解决方案。

Answer 3

不确定jQuery手机提供的特定内容，但是在Plain JavaScript中，您可以将事件侦听器添加到 focus> focus 事件中，以收听键盘打开键盘"还有一个事件侦听器对 Blur 事件，该事件指示" untocus"或您的情况"键盘关闭"。但是，如果您在键盘打开时，则必须手动处理逻辑，如果键盘打开，则由于以前的焦点事件。

Answer 4

我想你不会在乎我的答案，因为你有一个更好的答案，但是这里是：

$(document).on('focus blur', 'select, textarea, input', function(e){
  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ){
    //your function
  }
  else{
    //the opposite think you want to do
  }
});