iPad Safari - Make keyboard disappear

IosIpadMobile Safari

Ios Problem Overview


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

Ios Solutions


Solution 1 - Ios

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 - Ios

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 - Ios

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 - Ios

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

works with jquery UI datepicker on IPad

Solution 5 - Ios

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

Solution 6 - Ios

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

Solution 7 - Ios

Version without jQuery:

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

Solution 8 - Ios

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.

Solution 9 - Ios

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestioncopenndthagenView Question on Stackoverflow
Solution 1 - IosrdoggettView Answer on Stackoverflow
Solution 2 - IoslucaferrarioView Answer on Stackoverflow
Solution 3 - IosBLSullyView Answer on Stackoverflow
Solution 4 - IoszenonView Answer on Stackoverflow
Solution 5 - IosDisfigureView Answer on Stackoverflow
Solution 6 - IosGerry EngView Answer on Stackoverflow
Solution 7 - IosPylinuxView Answer on Stackoverflow
Solution 8 - IosIlkerView Answer on Stackoverflow
Solution 9 - IosJayView Answer on Stackoverflow