Get viewport height when soft keyboard is on

Question

I\'ve been trying to make this work for days now, with no luck, so I thought I\'d share info and maybe someone comes up with a solution.

I want to get the exact viewport

Answer 1

I've found myself with the same problem and after a while mixing CSS and a little bit of javascript, I found a solution.

Notes:

• I used jQuery and SCSS
• I preferred to hide the element instead of changing its position (simple and effective)
• The element is shown if the virtual keyboard is closed but the input is still on focus. For this I wrapped the css rule in a media query @media screen and (min-aspect-ratio: 11/16). 11/16 because it's less than the common 9/16 ratio (the presence of the virtual keyboard increases this ratio then the rule is applied)

The solution:

First, the script (using jQuery):

$(document).on('focus', 'input, textarea', function(){
    $('body').addClass("fixfixed");
});

$(document).on('blur', 'input, textarea', function(){
    $('body').removeClass("fixfixed");
});

So, while the user focuses on a text input and the virtual keyboard is open, the body has a 'fixfixed' class.

Then, the CSS (I'm using SCSS):

.fixfixed{
  @media screen and (min-aspect-ratio: 11/16) {
    .bottomThingToHideWhenVirtualKeyboardIsShown{
      opacity: 0;
      pointer-events: none;
    }
  }
}

And that's it!

Hope it helps someone!