Home » Android » html – Android soft keyboard obscures input fields in mobile HTML5 web app

html – Android soft keyboard obscures input fields in mobile HTML5 web app

Posted by: admin May 14, 2020 Leave a comment

Questions:

I am writing a mobile HTML5 web application to run on both Apple and Android. On the Android device I am testing on, I am having the following issue:

I have an input web control text box located in the lower 50% of the screen. When the focus goes to the text box, the soft keyboard is displayed and obscures/covers up/hides the input web control for which the user is supposed to be typing into. Only when the user types in at least one character does the input web control become visible and no longer hidden underneath the keyboard.

What I want is for the field being entered NOT to be obscured by the keyboard. When the soft keyboard is displayed, I want the input web control to remain visible.

This is on a Samsung tablet running Android version 3.2.

Please tell me how to accomplish this.

How to&Answers:

The simplest way to solve this android (and now ios7 too) nasty is to use the inputs focus and blur events. if you don’t have a footer tag change to a class.

In jQuery:

$("input").focus(function(){
    $('footer').hide();
});

$("input").blur(function(){
    $('footer').show();
});