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

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


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.


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   }}


The problem is that, if the active element is focused, you can trigger the resize event just by closing the keyboard without altering the focus.. so, the keyboard will hidden but the code will enter into the condition of focus.