CODEWITHSUNDEEP
iosipadmobile-safari
copenndthagen
copenndthagen

Reputation: 50732

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

Upvotes: 66

Views: 77398

Answers (10)

waterplea
waterplea

Reputation: 3631

If you do not want to blur your input, you can control virtual keyboard with inputMode. Setting it to none hides keyboard. Setting it to something else shows the corresponding keyboard. Check out this demo: https://codepen.io/waterplea/pen/dyLjaQP

Upvotes: 0

Disfigure
Disfigure

Reputation: 740

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

Upvotes: 2

zenon
zenon

Reputation: 61

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

works with jquery UI datepicker on IPad

Upvotes: 6

Pylinux
Pylinux

Reputation: 11816

Version without jQuery:

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

Upvotes: 1

Ilker
Ilker

Reputation: 9

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.

Upvotes: -1

lucaferrario
lucaferrario

Reputation: 1000

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

Upvotes: 23

rdoggett
rdoggett

Reputation: 1662

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

Upvotes: 163

BLSully
BLSully

Reputation: 5929

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/

Upvotes: 15

Gerry Eng
Gerry Eng

Reputation: 9

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

Upvotes: 0

Jay
Jay

Reputation: 85

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

Upvotes: -3

Related Questions