input textbox hidden behind keyboard on android Chrome

Question

I have a mobile web page of the following format:

header - logo etc - absolute positioned

content - scrollable, absolute positioned

footer, 40px abs

Answer 1

If you use jQuery, you can use the codes as follow:

$('body').on('focusin', 'input, textarea', function(event) {
  if(navigator.userAgent.indexOf('Android') > -1 && ...){
   var scroll = $(this).offset();
   window.scrollTo(0, scroll);
 }
});

Though, the bug should be solved now.

Answer 2

Changing from absolute positioning to fixed positioning should fix the issue. Absolute positions the element with respect to the initial page-size during page load (adding a keyboard shrinks the visible page). Fixed positions the element with respect to the current page-size, keeping the element above the keyboard.

#myElement {
  position: fixed;
  bottom: 2em;
}

Answer 3

I was hoping for a CSS only solutions, but I don't think there is one. Gaunt Face's answer is a good way of doing it. Unfortunately in my case, this would require a few changes and has the possibility of breaking automation among other things (since the url has #targets added to it).

I solved this by changing the position type in 2 click handlers.

I have a click handler for any input/textarea field. In that click handler, I change the position style of the form container div to be static. Note this will push the footer to the bottom if the container field has a scrollbar. This, in my case is not a problem as when the keyboard pops up, only a couple of fields are visible. The user cannot visibly see any difference.

I have a second handler for when the user clicks out of an input field - page click handler - where I restore the the position type to absolute, making the page appear just as it was before.

This has one unintended consequence - The scroll position is lost. I fixed this by getting the offset of the input field and calling scrollTop on the parent div with that offset, thus restoring the position.

I've seen a few questions about this, but did not find an answer. I hope this helps someone.

Answer 4

There are a few ways you could solve this, the most obvious solution is to use javascript to set a hash on the URL.

You can see an example of that here: http://jsbin.com/emumeb/24/quiet Code: http://jsbin.com/emumeb/24/edit

For a slightly more complex example, if you have a fixed header and footer, you might want to use targets to change the appearance of the page when a hash is set.

Depending on your layout you might need to get a little more creative, you could set a class on the body for focused vs non focused state and change the UI accordingly, but it starts to get tricky to maintain a good experience across mobile, desktop etc

Heres an example http://jsbin.com/emumeb/30/quiet Code: http://jsbin.com/emumeb/30/edit

Obviously this is something chrome should deal with itself (similar to the UX iOS has), so I've raised a bug against Chrome - https://code.google.com/p/chromium/issues/detail?id=270018&can=4&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified.

Answer 5

I found a CSS solution that works very well.

You can do a css query for a window screen of 300px height o less, that is the mostly screen height of phones with the software keyboard displayed. It works very fast and very well. For example

@media screen and (max-height: 300px) {

    #myinputtext{
        position: absolute; 
        top: 50px;

    }
}

Answer 6

I'm not smart like you guys,

So I took a ruler and measured the size of my cell phone screen. 2nd Then measured the size of the keyboard

I noticed that the keyboard occupied 38% of the screen.

So I put a div in the footer and called it affectionately frog.

and I used this code:

 $('body').on('focus', 'input, textarea', function(event) {
        var altura = $(window).height();
        var scrollp = parseInt(parseInt(altura)/100*38);
        $("#divSapo").css("height",scrollp + "px");
        window.scrollTo(0,document.body.scrollHeight);
    });