Как скрыть клавиатуру на странице jQueryMobile в приложении Phonegap?

У меня проблема с скрытой клавиатурой в симуляторе iPhone. Мой HTML-код:

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

Код jQuery:

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

Все работает так, как мне нужно: я могу получить значение формы и выполнить некоторые Ajax. Но когда функция возвращает false, виртуальная клавиатура в симуляторе iPhone все еще видна. Как скрыть клавиатуру? Есть ли другой способ сделать это? Мне нужно передать данные на сервер с помощью Ajax, когда пользователь выполняет поиск и нажимает "Go" на iPhone. Результат поиска должен быть показан на той же странице (уже сделано). Пользователь может снова выполнить поиск на той же странице.

Пожалуйста, помогите мне.

Спасибо,

- regeint

Ответ 1

Спасибо Hosh Sadiq и techfoobar за помощь. На самом деле я сделал следующее, и это сработало. Это не повлияло на css выше или ниже этого элемента.

$('.clr').after('<input type="checkbox" id="focusable" style="height:0; margin-left:-200px; clear: both;" />');
$('#focusable').focus();

Спасибо еще раз.:)

Ответ 2

Вместо переключения фокуса на другой элемент вы можете просто размыть свой вход следующим образом:

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

Он скроет виртуальную клавиатуру.

Ответ 3

из здесь

Это довольно понятно. Вторая строка дефокусирует все поля ввода, и она полагается на jQuery. Я обнаружил, что вызов blur() на одном сосредоточенном текстовом поле не всегда срабатывает. Либо одна из этих строк должна работать независимо, но обе они вместе не могут быть остановлены!

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

Ответ 4

В jQuery, если вы return false;, он остановит поведение браузера по умолчанию, которое в этом случае представляет как форму, так и закрытие клавиатуры. Должно работать следующее:

<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;
});

Ответ 5

Попробуйте добавить к вашей странице другой элемент, который сфокусирован (например: a <select>) (установите его высоту на 0, чтобы его невидимая еще не была сфокусирована) и смените фокус на этот элемент перед возвратом false.

Ответ 6

Я использовал regeint-решение, но немного изменил его, потому что я сказал phonegap, чтобы показать клавиатуру без взаимодействия с пользователем в Cordova.plist. Я установил KeyboardDisplayRequiresUserAction в NO

function hideTheKeyBoard() {
    $($.mobile.pageContainer).after('<input type="checkbox" id="focusable" style="height:0;margin-left:-200px;" />');
    $('#focusable').focus();// maybe .blur() would work too.
    $('#focusable').remove();
}