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

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

16 голосов
/ 08 января 2012

У меня проблема со скрытием клавиатуры в симуляторе 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

Ответы [ 7 ]

32 голосов
/ 16 июля 2012

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

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

Будет скрыта виртуальная клавиатура.

17 голосов
/ 29 мая 2013

из здесь

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

var hideKeyboard = function() {
    document.activeElement.blur();
    $("input").blur();
};
2 голосов
/ 08 января 2012

В 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;
});
1 голос
/ 16 ноября 2012

Я использовал решение 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();
}
1 голос
/ 10 января 2012

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

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

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

1 голос
/ 08 января 2012

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

0 голосов
/ 25 июля 2018

Метод .blur(), вероятно, самый эффективный, если вы не против потерять фокус.Но что, если, например, вам это нужно для того, чтобы сохранить список опций открытым, как это происходит при вводе текста.

Ниже вы увидите способ, который я нашел для решения этой проблемы. 

$('#keepMeFocused').click(function() {
  $(this).attr('type', 'text');
  $('#hideKeyboard').removeAttr('disabled');
  $('#msg').show();
});
$('#hideKeyboard').click(function() {
  $('#keepMeFocused').attr('type', 'button').focus();
  $('#hideKeyboard').attr('disabled', true);
});
#keepMeFocused {
  box-sizing: border-box;
  width: 200px;
  height: 24px;
  background: none;
  border: solid 1px #ccc;
  padding: 0 4px;
  text-align: left;
}

#hideKeyboard {
  height: 24px;
  background: #666;
  border: solid 1px #666;
  border-radius: 2px;
  color: #fff;
  vertical-align: top;
}

#hideKeyboard[disabled] {
  background: #ddd;
  border-color: #ddd;
}

#keepMeFocused:not(:focus) ~ #msg {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="keepMeFocused" type="text">
<button id="hideKeyboard" disabled>Hide Keyboard</button>
<p id="msg">Keep me visible while input has focus</p>

ОБНОВЛЕНИЕ : я исправил небольшую ошибку в коде и немного упростил JS

...