DEV Community

Cover image for How to detect that mobile keyboard pops up in Web?
Martin Belev
Martin Belev

Posted on

How to detect that mobile keyboard pops up in Web?

Recently we had a feature in which we had to make an animation on our header only when the keyboard on mobiles devices has been displayed so that we can decrease the size of the header and make more space for the user on the screen.

I think there is no standard way to do this. The options were either listen for input focus events and based on them to apply our changes, or resize events where some height calculations could be made to achieve the wanted behaviour. However, both options have their drawbacks:

  • with focus event we are trying to fight the browser's default behaviour when the keyboard pops up. This being the case the solution seems a little patchy.
  • with the resize event there are some problems on iOS devices

Does someone know another way of detecting that the mobile keyboard is displayed?

Top comments (3)

Collapse
 
jvarness profile image
Jake Varness

Is there an alternative to the design that you might consider instead of trying to detect if the keyboard is open? What about just using media queries to decrease the header in general on mobile?

I feel like there is a way you could otherwise reorganize the content that would help you avoid whatever code you're trying to write.

Collapse
 
martinbelev profile image
Martin Belev

Oh, I forgot to mention that the requirement is dropped for now. UI/UX people are going to review again and we will come up with something else. We won’t get such code in production for sure, no one is going to approve such PR.

Collapse
 
jvarness profile image
Jake Varness

🤣