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?

Solution 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.

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

Solution 3

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.

Solution 4

This question relies on there being a reliable way to detect when the onscreen keyboard appears (or disappears) on mobile devices. Unfortunately, there is no reliable way to detect this. Similar questions have come up several times on SO, with various hacks, tricks and workarounds suggested (see this answer for links to several relevant answer threads).

Also note that the resize event is not always triggered when the onscreen keyboard appears (see this answer).

My general suggestion would be to detect presence of touchscreen + detection of whether the active element is of a type that triggers an onscreen keyboard (something similar to this answer). However, this approach would still fail for hybrid windows devices (such as Surface Pro), where sometimes the onscreen keyboard may be present on browser resize, and sometimes the hardware keyboard may be in use on browser resize.

Solution 5

I've been looking for a solution to a similar issue. My resize event was triggering when the url input came in and out of view. This is something I've been working on... Could have a possible solution?

So basically you just check if the width of the screen alone has changed or not, and only fire your functions on the resize if it is different:

eg:

var saveWindowWidth = true;
    var savedWindowWidth;

//set the initial window width
    if (saveWindowWidth = true){
        savedWindowWidth = windowWidth;
        saveWindowWidth = false;
    }


//then on resize...


$(window).resize(function() {

//if the screen has resized then the window width variable will update
        windowWidth = window.innerWidth;


//if the saved window width is still equal to the current window width do nothing
        if (savedWindowWidth == windowWidth){
            return;
        }


//if saved window width not equal to the current window width do something
        if(savedWindowWidth != windowWidth) {
           // do something

            savedWindowWidth = windowWidth;
        }

    });

View more solutions

Comments

[CpnCrunch]

This will only work if you have explicitly set the attribute to "text" in your html code. Better to use prop() instead of attr().

[lpd]

Opening the keyboard could trigger a change in zoom though, which would affect at least some width measurements.

[jafarbtech]

oh... yaa... if it is so we can change the condition. both width and height will differ at the same time with any input focused, right?

[lpd]

Further, at least in Android chrome/firefox, it's possible to dismiss an onscreen keyboard without blurring the input element.

[jafarbtech]

can you give me some fiddle. It ll be better to test it exactly

[lpd]

I seem to have come to the same conclusion unfortunately. I moved on to trying to cancel the default zoom event but that was just as fruitless.

[Tomas Langkaas]

@lpd, I have tried to wrap my head around this issue, but can not seem to find any solution that will cover all use cases as long as there is no specific event triggered by change in onscreen keyboard visibility. This means that we are left with hacks and workarounds that may work in some, but not all, use cases.

[Talk is Cheap Show me Code]

also if I close the keyboard by bottom back button in android it will have still activeElement as type=text (or last focused input) and still resize event triggered due to hiding of keyboard. this solution is good but not complete and full proof.

[mialdi98]

Thanks! I took only this part function isFocus(){ return $(document.activeElement).prop('tagName')=='INPUT' || $(document.activeElement).prop('tagName')=='TEXTAREA'; } and transformer into this: $(window).resize(function(){ var focusedTagName = $(document.activeElement).prop('tagName'); if (focusedTagName == 'INPUT' || focusedTagName == 'TEXTAREA' || focusedTagName == 'SELECT' || focusedTagName == 'IFRAME' ) { // Fix for android keyboard. Do nothing. } else {} });