iOS5 Safari: Keyboard does not hide in a home screen HTML app

Question

I am working on a custom application for the iPad that runs as a homescreen app, but is made in all CSS/HTML/Javascript. (not using the SDK here)

I have run into an issue with a calculator I have built into my page not hiding the keyboard. No matter what I do, the keyboard stays up. I have searched this extensively and tried everything I can think of, but the keyboard stays up no matter what I do.

Explanation of what I have tried to hide the keyboard:

I have tried to blur all input fields to remove focus. I have tried setting focus onto non-text field items.

There were several threads on Stackoverflow from earlier this year/last year that suggested both of those options, but they do not appear to be working anymore.

To test further, I put a blank a href="#" on an img that was above the calculator, so that I could set focus on a non-entry and see if that would auto-minimize the keyboard. When I tap that item above the keyboard the focus changes and I am no longer in input mode, but the keyboard stays up.

Did Apple break this functionality with the latest update? If so, is there a work around?

Here is some example code that doesn't work:

    $('input').blur(function(e) {
        // Keyboard disappeared
           window.scrollTo(0, 1);
    }); 

That code successfully removes focus from the inputs, but the keyboard stays up. I have also attempted the inverse of that by just .focus ing on a non-text element. And additionally, as stated previously, I have straight-up just added a non-text element on the page and that still doesn't hide the keyboard.

Thanks so much for any help, and feel free to link/abuse me if I have mistakenly reposted. :)

Answer 1

document.activeElement.blur() inside a try catch block works for me. (Possibly you also need a setTimeout? I didn't need a timeout, and it is important to avoid timeouts wherever possible because they can easily cause nasty heisen-bugs!)

Also double check that you are not calling focus() somewhere within a mousedown or click event (which causes the keyboard to show). You can use a console.log(document.activeElement.tagName); or similar to help find what has current focus.

However if you don't find a solution then I am very interested in seeing how you get the keyboard to stay up... I have a use for that :-)

Answer 2

you should be able to blur it just by using something like this

$('input').blur();

you should put this inside the function/procedure that happens when you want it to disappear, unless your looking to disable it completely?