CODEWITHSUNDEEP
javascriptiphoneipadsafarimobile-safari
copenndthagen
copenndthagen

Reputation: 50732

Can you show/hide the iPad Safari keyboard using JavaScript?

Is it possible to control the display i.e.(show/hide) of keyboard in iPad Safari through code?

I have 2 form fields; 1. Text box (say Name) 2. Select list/Dropdown (Say State)

My question is when user moves focus from Name to State, the keyboard is still there..Why is it so and how can I hide the keyboard when focus moves to dropdown?

Thank you.

Upvotes: 5

Views: 7111

Answers (2)

energySloth
energySloth

Reputation: 21

I had the same issue. I had a form were keyboard should be collapsed when type out of the field (not native behavior on ipad) and when focus select field. The only solution for me was creation of hidden input

<input type="hidden" id="blurInput" />

and javascript code handler for focus event:

$element = $(event.target);
if($element.is('select')) {
    $('#blurInput').blur();
    $element.focus();
}

In case you want just to blur input field another solution works perfect, but between input and select it fails

document.activeElement.blur();
$('input').blur();

Upvotes: 1

jimbo
jimbo

Reputation: 11042

I just ran into a very similar problem, not sure if my solution will work for you.

In my case, I have a text input inside a form. On submit, I'm using e.preventDefault() to stop the page from navigating. I believe this was also having the effect of stopping the default action of hiding the keyboard.

To solve this, I added an explicit input.blur() when the form is submitted. This seemed to be enough for safari to remove the keyboard.

Hope this helps!

Upvotes: 2

Related Questions