hide keyboard in iphone safari webapp

Question

I\'m creating a webapp for the iPhone, based in HTML/CSS/JS. I\'m using forms to receive input and pass data to the script, but a problem I\'m encountering is that the keybo

Answer 1

You could try focus()ing on a non-text element, like the submit button.

Answer 2

Here's a small code snippet that always hides the keyboard whenever the focus is in an input or textarea field and the user taps outside of that element (the normal behaviour in desktop browsers).

function isTextInput(node) {
    return ['INPUT', 'TEXTAREA'].indexOf(node.nodeName) !== -1;
}

document.addEventListener('touchstart', function(e) {
    if (!isTextInput(e.target) && isTextInput(document.activeElement)) {
        document.activeElement.blur();
    }
}, false);

Answer 3

Be sure to set, in CSS:

body {
  cursor: pointer;
}

otherwise, your event handler calling document.activeElement.blur() will never get fired. For more info, see: http://www.shdon.com/blog/2013/06/07/why-your-click-events-don-t-work-on-mobile-safari