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
focusevent 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
resizeevent there are some problems on iOS devices
Does someone know another way of detecting that the mobile keyboard is displayed?
Top comments (3)
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.
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.
🤣