I'm attempting to hide the iPad soft keyboard when the user clicks outside a text field.

Specifically somewhere on the form or body that contains no other elements.

Using jquery, jquery mobile, and html5.

I'm attempting to hide the iPad soft keyboard when the user clicks outside a text field.

Specifically somewhere on the form or body that contains no other elements.

Using jquery, jquery mobile, and html5.

• javascript
• jquery
• ios
• ipad
• html

• have you tried calling textfield.blur()? Of course you have to fetch the click before in any way. – calimarkus Commented Mar 8, 2012 at 15:50
• keyboard should hide on the blur event of the input..if not the problem is elsewhere. show your code – gpasci Commented Mar 8, 2012 at 16:34
• Right now using an Android tablet it functions perfectly. The user clicks outside the textbox, and the keyboard will collapse. I only have the code below, everything else I've tried has failed. var hideKeyboard = function() { document.activeElement.blur(); $("input").blur(); }; This is so the textbox will blur so the keyboard closes, if the user clicks any other element like radio buttons etc... Is there a way to have this work with the form or body as well? I'm a C programmer by trade, and javascript makes me want to rip my hair out. – yeowoh Commented Mar 8, 2012 at 17:20
• do you have more then one textfield? – nycynik Commented Apr 17, 2012 at 22:29
• setTimeout(function(){ $('Wrappingdiv').click(function(){console.log('!')}) },0) – James Andino Commented Nov 9, 2012 at 22:15

3 Answers 3

document.activeElement.blur();

using mattwindwer's solution (but with more details):

$(document).click(function() {
    document.activeElement.blur();
});

Calling focus() method on a button (even hidden buttons) hides the keyboard. I have used this in my ipad web app.

You can add a click listener to body and using target property of the event, you can determine when to hide the keyboard.