Phonegap Android keyboard covers input elements scrolling is disabled

Question

I\'ve tried many different solutions and nothing is quite what I want. What I want is for the keyboard to show on top of the content (keeping the content the same size) whi

Answer 1

You can detect focused textarea or input, then wait a while until keyboard is shown and finally scroll the page to reach focused input.

$("#textarea").focus(function(e) {
    var container = $('#container'),
        scrollTo = $('#textarea');

    setTimeout((function() {
        container.animate({
        scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
        });
    }), 500);

});

When keyboard is hidden the textarea keeps focused, so if it's clicked again the keyboard will show and the container needs to scroll again to show the input

$("#textarea").click(function(e) {
    e.stopPropagation();
    var container = $('#container'), //container element to be scrolled, contains input
        scrollTo = $('#textarea');

    setTimeout((function() {
        container.animate({
        scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
        });
    }), 500);
});

Hope this helps, cheers!