Detect When Soft Keyboard is in Use abd Run a JS Function?

Question

I have a site that opens a modal upon click that contains a form. I noticed on my iPad that when the soft keyboard is open it covers several fields of the form, and as I am near the bottom of the screen, I cannot scroll to reveal those hidden fields.

In researching this issue I came across this answer which includes code from this answer. However, neither of these answers seem to work when tested on iOS 8.3.

Here is what I would like to achieve:

• Detect when the keyboard is opened.
• Find the height of the keyboard.
• Add padding to the bottom of the footer to accommodate the height of the keyboard.
• When the keyboard is dismissed or closed, the padding is removed.

There are a few things to note:

• If someone is using a connected keyboard (including bluetooth keyboards) don't do anything as the soft keyboard shouldn't appear
• jQuery is okay to use.
• A solution must run via client side code.
• I prefer a solution that covers iOS and Android. Preferably, any device that can use a soft keyboard.

How could I achieve a solution that will increase the padding in my footer, that will work on the majority of devices, when someone is using a soft keyboard as a means of filling out a form in a modal?

Answer 1

I bumped into a problem similar to this not too long ago and I found a small solution to this, when a mobile or tablet is being used and a keyboard is activated it triggers a resize event of the screen so you could use that to trigger a function.

var lastHeight = $(window).height(); //  store the intial height.
var lastWidth = $(window).width(); //  store the intial width.
var keyboardIsOn = false;

$(window).resize(function () {
    if ($("input").is(":focus")) {
        keyboardIsOn =
           ((lastWidth == $(window).width()) && (lastHeight > $(window).height()));
    }   
    if(keyboardIsOn){
        var keyboardHeight = lastHeight - $(window).height();
        $("footer").css("padding", keyboardHeight+"px");
    } else{
        $("footer").removeAttr("style");

        //or if you just want to remove the padding
        //$("footer").css("padding", 0);
    }
}); 

//An alternative solution is by checking if the height of the screen 
//change on input/textarea focus.

$('input, textarea').focus(function() {
     keyboardIsOn =
           ((lastWidth == $(window).width()) && (lastHeight > $(window).height()));
     if(keyboardIsOn){
        var keyboardHeight = lastHeight - $(window).height();
        $("footer").css("padding", keyboardHeight+"px");
    } else{
        $("footer").removeAttr("style");

        //or if you just want to remove the padding
        //$("footer").css("padding", 0);
    }
});