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).resize(function() {     ///do stuff }); 

I want to do the 'stuff' in that function on all resize events except for when it is triggered by the soft keyboard. How can I determine if the soft keyboard has triggered the resize?

Answer 1

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.

Answer 2

I've just fixed kirisu_kun's answer to use prop() instead of attr():

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