CODEWITHSUNDEEP
javascriptandroidangularjsjquery-mobilewebview
Emmanuel Demey
Emmanuel Demey

Reputation: 2228

Android keyboard hide text inputs

I have an application using jQuery Mobile.

When testing on Chrome (on Android), when the keyboard is opened, some inputs located at the bottom of the page are automatically moved to the top. That the behavior I expect.

When I add this website into the Home Screen of my android, this behavior does not work, and all text inputs are hidden by the keyboard.

I have also remarked that when I open again the same application on Chrome, and after retry the Webview-based app, everything is now OK. The inputs are not hidden anymore.

Do you already seen this kind of error ?

Thanks by advance

Upvotes: 4

Views: 9076

Answers (2)

Janey
Janey

Reputation: 1310

Please see the answer from when I raised this same question...

Jquery Mobile 1.4.5 virtual keyboard in the device hides the form inputs at the bottom of the page

I opened an issue with JQM and this is the response I got. Turns out it's a Chrome fullscreen browser bug, nothing to do with JQM...

The only way i could think to attempt to work around this would be something like http://jsbin.com/kagidi/9/edit?html,css,output which fixes the issue on chrome homescreen however this is not really a complete fix it has a few issues that cant really be solved.

There is no way to know the keyboard size, and there for how much height to add to the body, on a particular device even more so when you keep in mind custom keyboards.

It requires a lot of userAgent sniffing to make it work properly

Because of these issues this is not really something we would add to the library i don't think. However this may solve your issue

Upvotes: 0

Tasos
Tasos

Reputation: 5361

I created a demo for you, as an alternative

I had to append a blank box to create some space at the bottom and then move the input up to the header when you focus on the input because its at the bottom so no scroll space.

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();
});

Upvotes: 3

Related Questions