24

I try to react to the on-screen keyboard in our web applications. Unfortunately there are some things complicating this:

First of all, the application has to run equally on mobile platforms (tablets) and desktops. Additionally scrolling the document/body is forbidden and to spice things up even more, landscape mode is mandatory on tablets.

So, if someone selects any input field, the on-screen keyboard opens up and blocks the sight on half of the page, therefor some inputs become invisible and I need to change that.

Unfortunately it seems, there is no event fired at all, which indicates, that half of the application just became invisible. I already checked scroll and resize events, but they didn't fire, too.

Of course, I could always react somehow as soon as I'm sure to be on a tablet. Probably 95% of the users will not attach a hardware keyboard anyway. But isn't there any cleaner way?

koehr
  • 769
  • 1
  • 8
  • 20

4 Answers4

8

Unfortunately the answer here is a clear: NO. There are some related questions here with some further information and tricks:

screen styling when virtual keyboard is active

iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?

Android/iPhone webkit, event triggered on keyboard pop?

Community
  • 1
  • 1
koehr
  • 769
  • 1
  • 8
  • 20
6

On Android (sorry iOS), the resize event will fire when the keyboard resizes your page. Add an onresize event handler on your window and adjust the scrolling as needed.

Zectbumo
  • 4,128
  • 1
  • 31
  • 26
  • window.onresize = function(e) { alert("resized"); }; This isn't working, or do I miss something? iOS 14.7 – Tristan G Aug 17 '21 at 14:42
  • 1
    Bummer @TristanG, seems this is Android only. I updated the answer. Please let me know when Apple catches up. – Zectbumo Aug 19 '21 at 06:01
2

Did you try the focus and blur event?

So you can lock the min-height of the form (or other parent element) with a class when keyboard appears, and so the user can scroll touching screen when a input is selected.

I was looking for a similar issue, and this trick resolves my case. ✌

*** EDIT ****

As @mac used and exemplified us in the comment below

Augusto TMW
  • 59
  • 1
  • 5
0

I have an idea. If you know the screen is in a mobile size, you can detect when an input or textarea has the focusin and focusout event fired. If thats the case, the keyboard is probably opened.

jQuery example

$('input[type="text"], input[type="number"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], textarea')
  .on('focusin', function (){
    if(window.innerWidth < 800){
      // do stuff on keyboard opened...
    }
  })
  .on('focusout', function (){
    if(window.innerWidth < 800){
      // revert changes on keyboard closed...
    }
  });

Or using the height with any input type

let initHeight = window.innerHeight;

$('input, textarea')
  .on('focusin', function (){
    if(window.innerHeight < initHeight && window.innerWidth < 800){
      // do stuff on keyboard opened...
    }
  })
  .on('focusout', function (){
    if(window.innerWidth < 800){
      initHeight = window.innerHeight; // ensure initHeight is still accurate
      // revert changes on keyboard closed...
    }
  });
SwiftNinjaPro
  • 787
  • 8
  • 17