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

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

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

Answer 5

Similar to previous answer, but targets all kinds of forms 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 6

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

    });

Answer 7

There are a few things u need to concentrate about

1. All soft keyboards affects only the height and not width.
2. Focus elements tags can be either input or textarea.
3. The height will decrease when element get focused (or) the height will increase when focused out.

You can use these combinations when the browser gets resized

function getWidth(){
return $( window ).width();
}

function getHeight(){
return $( window ).height();
}

function isFocus(){
return $(document.activeElement).prop('tagName')=='INPUT' || $(document.activeElement).prop('tagName')=='TEXTAREA';
}

var focused = false;
var windowWidth=getWidth(),windowHeight=getHeight();

//then on resize...    
$(window).resize(function() {

var tWidth=getWidth(),tHeight=getHeight(),tfocused=isFocus();

//if the saved window width is still equal to the current window width do nothing
if (windowWidth == tWidth && ((tHeight < windowHeight && !focused && tfocused) || (tHeight > windowHeight && focused && !tfocused))){
 windowWidth=tWidth;
 windowHeight=tHeight;
 focused=tfocused;
 return;
}
else{
 windowWidth=tWidth;
 windowHeight=tHeight;
 focused=tfocused;

 //Your Code Here

}
});

Answer 8

Working fine in current version of chrome webview. I just implemented window resize functionality in Angular by using below code.

@HostListener('window:resize', ['$event'])
  onResize(event) {
  // Do you handling here.
}

Note: Same can be achieved by using

 window.addEventListener('resize', () => {
   // Do handling here
 });