I’ve written an HTML5 application for iPad. It has one input field. Every time a user es to this page, the popup keyboard appears.

How can I suppress this default behavior within HTML5/JS context?

In my app, if you type in a login & password, it shows another screen (without page reload). But the keyboard still exists, and you have to manually hide it.

I’ve written an HTML5 application for iPad. It has one input field. Every time a user es to this page, the popup keyboard appears.

How can I suppress this default behavior within HTML5/JS context?

In my app, if you type in a login & password, it shows another screen (without page reload). But the keyboard still exists, and you have to manually hide it.

• javascript
• xhtml
• html
• ipad

• Hmm.. One of solution it's to make it disabled... Any others? – Alex Ivasyuv Commented Jul 23, 2010 at 16:52
• Perhaps, as in my case, because you have a jQuery date picker assigned to the field. But disabling the field also disables the date picker. – Rob Osborne Commented Sep 2, 2010 at 0:41
• In my app, if you typed login & password, it shows another screen (without page reload). But keyboard still exist... And you have to manually hide it... – Alex Ivasyuv Commented Oct 31, 2010 at 22:10
• @Rob: Assign datepicker to a hidden input or other visual non-form element and add a click event to a button. Make the click event trigger datepicker to show. If necessary, add a callback on the plete (not sure the real name) event to get the value returned so that you can display it in another visual HTML element (even a form element at this point). – Kevin Peno Commented Nov 1, 2010 at 3:52
• 1 Have you tried calling blur on all input,textarea in the form before submitting the form via ajax? – Kevin Peno Commented Nov 1, 2010 at 3:54

1 Answer 1

I’m not sure I understand your description of your problem, it seems inplete. Could I try re-stating it, to see if I understand correctly?

1. The user opens Safari on the iPad
2. The user types the address of your HTML5 app into Safari’s address bar, and taps the “Go” button
3. The user is taken to your app’s login page. They tap into the username field, and the popup keyboard appears.
4. They type in their username, switch to the password field, type in their password, and tap the “Go” button.
5. Your app loads some different content on the screen via JavaScript. The popup keyboard is still present.

If that’s the problem you’re having, it might be worth calling the blur function on your username and password fields before you load the content of the new page. That might make the keyboard go away.

If the HTML for these fields looked like this:

<input type="text" name="username" id="username">
<input type="password" name="password" id="password">

Then the JavaScript would be:

document.getElementById('username').blur();
document.getElementById('password').blur();