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?

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

Thanks

回答1:

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

Android

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

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:

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

回答2:

Not sure if there is something specific provided by jQuery mobile, but in plain Javascript you could add an event listener to the focus event to listen for "keyboard open" and an event listener to the blur event which indicates the "unfocus" or in your case "keyboard close". Nevertheless, you'd have to manually handle the logic, if you focus a different element while the keyboard is open due a previous focus event.

回答3:

I guess you won't care about my answer because you've got a better one but here it is:

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

来源：https://stackoverflow.com/questions/47798279/jquery-mobile-how-to-detect-if-mobile-virtual-keyboard-is-opened

标签

javascript

mobile-website