header and footer changes their position when keyboard popup in phone gap android

Question

I have created a page which contains a collapse view and input text within it. Its working fine the problem is header and footer remains fixed till the input text is clicked and an keyboard popup once the keyboard popup the header slides up with the fields and hide but once the keyboard hides header and footer come to their original position can any one tell why its behaving like this and how can i overcome this problem.

Answer 1

Use this Working on my side and please use the same sequence

<script src='js/jquery-1.9.1.min.js' type="text/javascript"></script>
<script>
    $(document).on("mobileinit", function() {

        $.mobile.fixedtoolbar.prototype.options.tapToggle = false;
        $.mobile.fixedtoolbar.prototype.options.hideDuringFocus = "";

    });
</script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>

Answer 2

The simplest way to solve this android nasty is to use the inputs focus and blur events.

In jQuery:

$("input").focus(function(){
    $('footer').hide();
});

$("input").blur(function(){
    $('footer').show();
});