How to hide keyboard in jQueryMobile page in a Phonegap app?

Question

I have a problem with hiding keyboard in the iPhone simulator. My HTML code:

<form id="my_form">
    <input type="search" id="searchBar" />
</form>

jQuery code:

$("#my_form").submit(function() {
  one = $('#searchBar').val();
  console.log(one);
  doSearch(one);
  return false;
});

Everything works as I need: I can get form value and perform some Ajax. But when the function returns false, the virtual keyboard in the iPhone simulator is still visible. How to hide the keyboard? Is there another method to do that? I need to pass data to the server using Ajax when the user searches and presses 'Go' on the iPhone. The search result should be shown in the same page (already done). The user can again search in the same page.

Please help me.

Thanks,

--regeint

Answer 1

Instead of switching focus to another element you can simply blur your input like this:

$('#searchBar').blur();

It will hide the virtual keyboard.

Answer 2

from here

It's pretty self-explanatory. The 2nd line will de-focus all input fields, and it relies on jQuery. I found that calling blur() on the single focused textfield didn't always work. Either one of these lines should work independently, but both of them together cannot be stopped!

var hideKeyboard = function() {
    document.activeElement.blur();
    $("input").blur();
};

Answer 3

In jQuery, if you return false;, it will stop the default browser behaviour, which, in this case, is both submitting the form as well as closing the keyboard. The following should work:

<form id="my_form">
    <input type="search" id="searchBar" />
    <div style="height:0;width:0;">
        <input id="focusable" type="checkbox" />
    </div>
</form>

jQuery:

$("#my_form").submit(function(){
    one = $('#searchBar').val();
    console.log(one);
    doSearch(one);
    $('#focusable').focus();
    return false;
});