javascript - Android keyboard hide text inputs - Stack Overflow

admin管理员组

文章数量:1391964

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

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

• javascript
• android
• angularjs
• jquery-mobile
• webview

Share Improve this question Follow asked Jul 21, 2015 at 9:59 Emmanuel DemeyEmmanuel Demey 2,22844 gold badges1919 silver badges2121 bronze badges 3

• Yeah well Chrome for Android browser has something built into it to do that. Can you explain what you mean by (When I add this website into the Home Screen of my android) ?? what do you mean by (home screen) ?? – Tasos Commented Jul 21, 2015 at 15:58
• Hi, I mean this feature : google.fr/imgres?imgurl=http://3.bp.blogspot./-WVDN3YkA-mM/… – Emmanuel Demey Commented Jul 21, 2015 at 16:15
• that whole search-box appears as you scroll down to the bottom or is it at the bottom always?? anyway have a look at the demo i created in the answer, maybe it will be sufficient for you. Otherwise the are some workarounds – Tasos Commented Jul 21, 2015 at 16:18

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

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./kagidi/9/edit?html,css,output which fixes the issue on chrome homescreen however this is not really a plete 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

本文标签： javascriptAndroid keyboard hide text inputsStack Overflow