How to detect Android browser hide soft-keyboard event?

Question

I have a problem with Android Webkit browser and must detect when the soft-keyboard is hidden by hand(pressing the button on the right top).

Like in the above picture, when I press the button, the soft keyboard will be hidden but no resize event is triggered. Nor the input is blured. I also found that the document.body.clientHeight is not changed. So how should I detect this action?

Thanks!

Answer 1

So this was my solution to get around this issue:

First I ran a function to detect which mobile device was being used:

var getMobileOperatingSystem = function() {
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;
    if (/android/i.test(userAgent)) {
        return "Android";
    }
};
if (getMobileOperatingSystem() === 'Android') {
    // REST OF CODE
}

When the android keyboard is open this changes the value of window.innerHeight. Because of this I created a function which when called would continuously run every 500ms, each time retrieving the height of the devices window and storing it in a variable. I also created another variable which would get the devices height when the page has loaded. Once these two variables values matched each other this indicated to me the keyboard had been hidden.

Here's the full code:

var getMobileOperatingSystem = function() {

    var userAgent = navigator.userAgent || navigator.vendor || window.opera;

    if (/android/i.test(userAgent)) {
        return "Android";
    }

};

if (getMobileOperatingSystem() === 'Android') {

    var windowHeight;
    var originalHeight = window.innerHeight;

    var whenWindowHeightChanges = function(callback) {

        console.log(windowHeight, 'current window height');
        console.log(originalHeight, 'original window height');

        if (windowHeight === originalHeight) {
            if (typeof callback == 'function') {
                callback();
            }
        } else {
            setTimeout(function(){
                windowHeight = window.innerHeight;
                whenWindowHeightChanges(callback);
            }, 500);
        }
    }

    var input = $('footer input');

    input.on('focus', function(){

        whenWindowHeightChanges(function(){
            console.log('conditions passed');
            // CODE TO RUN WHEN ANDROID KEYBOARD IS HIDDEN
            windowHeight = null;
            input.blur();
        });     

    });

}