JQueryMobile - fixed footer not fixed after input

Question

I'm using JQueryMobile for my mobile site. I've got a fixed footer that hides and shows when you press the "Share" button. It then disappears when you start scrolling. I've also got comment boxes.

To recreate the error: [removed] (use a mobile device or sim)

• Scroll down and click the first comment button (speech bubble + '3')
• Click on the text area
• Click 'done' to unfocus
• Click on 'Share' to the right of the first comment button.

You'll see the footer briefly appear, and then it drops to the bottom of the page. If you click on 'Share' while still focused on the textarea, the footer just doesn't appear at all.

You can recreate what I WANT to happen by simply clicking on the 'Share' button as soon as the page loads.

What's going on there and how can I fix it? I've tried to do various things upon text unfocus, but I can't get anything to work.

Answer 1

I don't know why this code not fix this problem on my app (jquery mobile 1.3.1). but i found a solution for this bug. i hope it will help to solve your problem

$('div:jqmData(role="page")').on('pageinit',function(){
    $(document)
        .on('focus','input, select, textarea', function(){
            $('[data-role="footer"][data-position="fixed"]').hide();
        })
        .on('blur','input, select, textarea',function(){
            $('[data-role="footer"][data-position="fixed"]').show();
        });
});

Answer 2

I've hacked a fix for this by not hiding the footer upon focus. It's not a perfect solution, it might be a bug in JQuery.

$("[data-role=footer]").fixedtoolbar({ hideDuringFocus: "input, select" });