10

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.

yeowoh
  • 143
  • 1
  • 9
  • have you tried calling textfield.blur()? Of course you have to fetch the click before in any way. – calimarkus Mar 08 '12 at 15:50
  • keyboard should hide on the blur event of the input..if not the problem is elsewhere. show your code – gpasci Mar 08 '12 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 Mar 08 '12 at 17:20
  • do you have more then one textfield? – nycynik Apr 17 '12 at 22:29
  • setTimeout(function(){ $('Wrappingdiv').click(function(){console.log('!')}) },0) – Tegra Detra Nov 09 '12 at 22:15
  • I solved this problem with the line of code from the previous comment. – Tegra Detra Nov 09 '12 at 22:15
  • Here is solution for this ,it worked for me http://stackoverflow.com/questions/5306240/iphone-dismiss-keyboard-when-touching-outside-of-textfield – Apple_Magic Jan 10 '13 at 09:03

3 Answers3

11
document.activeElement.blur();
mattwindwer
  • 929
  • 9
  • 18
  • Can anyone tell me where to add this code as I am trying to do the same but I am not able to attach it properly. Currently I am trying to attach it on window object. But once I run it, it just stops opening the keypad. Need to know whom to attach it. – Ganesh Pandhere May 02 '14 at 12:36
  • try to put the code on `$(document).click(function() { });` – clintgh Feb 10 '15 at 09:48
3

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

$(document).click(function() {
    document.activeElement.blur();
});
clintgh
  • 2,039
  • 3
  • 28
  • 44
1

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.

Tejesh Alimilli
  • 1,782
  • 1
  • 21
  • 31