jQuery mobile如何检测移动虚拟键盘是否已打开 [英] jquery mobile how to detect if mobile virtual keyboard is opened

问题描述

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

In mobile device, when I open my page and select an inputbox, the virtual keyboard is open, and I want to catch this event to do my job.

在移动浏览器中是否定义了任何事件处理来完成此任务?

Is there any event handling defined in mobile browser to accomplish this?

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

So when the keyboard is open, I d like to run my custom function to show/hide some UI blocks in the page.

谢谢

推荐答案

在这种情况下，第一个jQuery Mobile没有任何预定义的事件处理程序. 您需要自己弄清楚方法.

First jQuery Mobile does not have any pre-defined event handler for this case. You will need to figure out the way yourself.

Android

打开虚拟键盘时，将触发Windows调整大小事件. 因此，您可以检查更改为检测键盘的窗口宽度和高度之和是否为打开状态.

When virtual keyboard is open, it fires windows resize event. So you can check if the sum of windows width and height changed to detect keyboard is open or not.

iOS

这不会触发调整大小事件，所以只需绑定@RamizWachtler提到的焦点和模糊事件

This does not fire resize event, so simply bind focus and blur event as mentioned by @RamizWachtler

因此，我在这里为您提供了一些代码:

So I have some codes for your here:

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

You just add your own handling code into onKeyboardOnOff() function.

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();
});

这篇关于jQuery mobile如何检测移动虚拟键盘是否已打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！