How to determine if a resize event was triggered by soft keyboard in mobile browser?

Question

There\'s a lot of discussion about the soft keyboard but I haven\'t found a good solution for my problem yet.

I have a resize function like:

$(window         


        

Answer 1

Similar to previous answer, but targets all kids of form with focus (obviously, would fail on inputs without a form parent)

$(window).resize(function() {
    if($('form *').focus()) {
        alert('ignore this');
    } else {
        // do the thing
    }
});

So maybe this one...

$(window).resize(function() {
    if($('input, select, etc').focus()) {
        alert('ignore this');
    } else {
        // do the thing
    }
});

Answer 2

I recently ran into some problems that needed a check for this. I managed to solve it like so:

$(window).on('resize', function(){
   // If the current active element is a text input, we can assume the soft keyboard is visible.
   if($(document.activeElement).attr('type') === 'text') {
      // Logic for while keyboard is shown
   } else {
      // Logic for while keyboard is hidden
   }
}

I only needed it for text inputs, but obviously this could be expanded for any kind of element which might trigger the soft keyboard/number picker etc.