Android keyboard hides text inputs
I have an application using jQuery Mobile.
When tested in Chrome (on Android), when opening the keyboard, some inputs located at the bottom of the page are automatically moved to the top. This is the behavior I expect.
When I add this site to my android home screen, this behavior does not work and all text inputs are hidden by the keyboard.
I also noticed that when I reopen the same app in Chrome and after re-launching the Webview based app, everything is fine. The entrances are no longer hidden.
Have you seen this error before?
thanks in advance
source to share
I created a demo for you, as an alternative
I had to add a blank cell to create some space at the bottom, and then move the input to the header when you focus on the input, because there is no scroll at the bottom at the bottom.
Demo
https://jsfiddle.net/fyom081o/
code
$(document).on("focus", "#text-basic", function(event){
var boxheight = $(window).height() - 40;
$("#mycontntent").append("<div id='blank' style='height:"+boxheight+"px;'"+"></div>");
$('html, body').animate({scrollTop: $('#text-basic').offset().top - 100}, 500);
});
$(document).on("focusout", "#text-basic", function(event){
$('#blank').remove();
});
source to share
Please see the answer when I raised this question ...
JQuery Mobile 1.4.5 virtual keyboard in device hides form input at the bottom of the page
I opened an issue with JQM and this is the answer I got. It turns out this is a Chrome browser bug in full screen mode, has nothing to do with JQM ...
The only way I could try to get around this is with something like http://jsbin.com/kagidi/9/edit?html,css,output , which fixes the issue on the chrome desktop, however it's not quite complete fix, it has several issues that cannot be resolved.
There is no way to know the size of the keyboard, nor tell you how much height to add to the body, on a specific device, much less if you mean custom keyboards.
It takes a lot of userAgent sniffing for it to work fine
Because of these issues, this is not something we would add to the library, I don't think. However, this may solve your problem.
source to share