iPad Safari - Make keyboard disappear

In iPad Safari browser, when I change focus from a textbox to a dropdown, the keyboard still remains... Is there some way (maybe with Javascript) I can hide the keyboard when user blurs from the textbox?

Indirectly speaking, I am looking for a equivalent of (but in Mobile Safari)

[tempTextField resignFirstResponder];

Solution 1:

I found the solution for this at http://uihacker.blogspot.com/2011/10/javascript-hide-ios-soft-keyboard.html. Essentially, just do this (it worked for me):

var hideKeyboard = function() {
    document.activeElement.blur();
    $("input").blur();
};

Solution 2:

I had iPad with iOS 5.0.1 not hiding the keyboard after successful login on my site. I solved by simply executing the javascript command

document.activeElement.blur();

after successful login and now the keyboard is correctly hidden :-)

Solution 3:

I know this is a slightly older question, but I discovered the answer today for this, and the answer is embarrassingly simple... I spent way more time than I would like to admit figuring this out ;)

To prevent showing the keyboard on:

<input type="text" name="someInput" />

for when you want to do something like use a jQuery UI datepicker...

add a readonly attribute like so:

<input type="text" name="someInput" readonly="readonly" />

If you are trying to be mindful of people with JS turned off, you could always leave off the attribute and add it in your code:

$('[name=someInput]').attr('readonly','readonly');

Hope this helps.

Here is a jsFiddle demonstrating the concept: http://jsfiddle.net/3QLBz/5/

Solution 4:

$("#txt").on("focus", function(){
    $(this).blur();
});

works with jquery UI datepicker on IPad

Solution 5:

Natively, iPad, iPhone keyboard should disappear when the input looses focus.

I figured out on mobile/tablet devices that
Safari only handles click event for elements having cursor:pointer property.

I've finally added cursor:pointer on the body tag for mobile/tablet devices and it works like a charm.

Little sample

body {
  @media (max-width: 1024px) { /* IPad breakpoint */
    cursor: pointer; /* Fix iPhone/iPad click issue */
  }
}