iPad Safari - Make keyboard disappear - ios

Question

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];

Answer 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();
};

Answer 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 :-)

Answer 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/

Answer 4

$("#txt").on("focus", function(){
$(this).blur();
});
works with jquery UI datepicker on IPad

Answer 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 */
}
}

Answer 6

Version without jQuery:
function hideKeyboard () {
document.activeElement.blur();
Array.prototype.forEach.call(document.querySelectorAll('input, textarea'), function(it) {
it.blur();
});
}

Answer 7

I call .focus() on another textfield and the keyboard disappears. I'm using the Sencha touch framework, the textfield im referring to is an Ext.Text object.
I know this is counter-intuitive, but it seems to work for me

Answer 8

Sample.views.MessageBar.getComponent(0).blur();
document.activeElement.blur();
window.focus();
Sample.views.sendMessageBar.getComponent(0).setDisabled(true);
You can use codes above. First and Forth lines are for that textfield. It works on iphone but it doesnt work on Android. I tried Iphone 3gs and samsung galaxy s2.

Answer 9

According to Apple Safari documentation, when you select a dropdown (select list) the iOS dismisses the keyboard and displays native iOS select control. Make sure you use SELECT element for your dropdown list
and also try adding this to your meta tags for the page
<meta name="apple-mobile-web-app-capable" content="yes" />