Скрыть клавиатуру в iphone safari webapp

Я создаю webapp для iPhone, основанный на HTML/CSS/JS. Я использую формы для приема ввода и передачи данных в script, но проблема, с которой я сталкиваюсь, заключается в том, что клавиатура не исчезнет. Пользователь вводит информацию, попадает в submit, и, поскольку она не обновляется, страница не перезагружается. Клавиатура остается на месте, что является неприятностью и добавляет еще один шаг для пользователей (чтобы закрыть его).

Есть ли способ заставить клавиатуру в Safari уйти? По сути, я чувствую, что этот вопрос эквивалентен тому, как я могу заставить окно ввода потерять фокус или размыть. В режиме онлайн я нахожу множество примеров для обнаружения события размытия, но ни один из них не должен вызывать это событие.

Ответы

Ответ 1

Более просто, вы можете вызвать blur() для текущего сфокусированного элемента. $( "# InputWithFocus" ). Размывание()

Ответ 2

document.activeElement.blur();

Ответ 3

Вы можете попробовать focus() ing для нетекстового элемента, например кнопку отправки.

Ответ 4

Вот небольшой фрагмент кода, который всегда скрывает клавиатуру всякий раз, когда фокус находится в поле ввода или textarea, и пользователь выходит за пределы этого элемента (обычное поведение в настольных браузерах).

function isTextInput(node) {
    return ['INPUT', 'TEXTAREA'].indexOf(node.nodeName) !== -1;
}

document.addEventListener('touchstart', function(e) {
    if (!isTextInput(e.target) && isTextInput(document.activeElement)) {
        document.activeElement.blur();
    }
}, false);

Ответ 5

Чтобы определить, когда нажата кнопка возврата, используйте:

$('input').bind('keypress', function(e) { if(e.which === 13) { document.activeElement.blur(); } });

Ответ 6

$('input:focus').blur();

используя атрибут CSS для сфокусированного элемента, это размывает любой вход, который в настоящее время имеет фокус, удаляя клавиатуру.

Ответ 7

Я столкнулся с этой проблемой и провел некоторое время, пока не получил удовлетворительное решение. Моя проблема немного отличалась от исходного вопроса, так как я хотел отклонить входное событие при нажатии внешней области элемента ввода.

Упомянутые ответы выше работают, но я думаю, что они не завершены, вот моя попытка в случае, если вы приземлитесь на эту страницу, ища то же самое, что и я:

Решение jQuery

Мы добавляем прослушиватель событий touchstart для всего документа. Когда экран коснется (не имеет значения, будет ли это нажатие, удержание или прокрутка), он вызовет обработчик, а затем мы проверим:

  • Отображает ли затронутая область вход?
  • Сфокусирован ли вход?

Учитывая эти два условия, мы запускаем событие blur() для удаления фокуса с входа.

ps: Я был немного ленив, поэтому просто скопировал строку из вышеприведенного ответа, но вы можете использовать селектор jQuery для документа, если вы хотите сохранить согласованность кода

$(document).on('touchstart', function (e) {
  if (!$(e.target).is('.my-input') && $('.my-input').is(':focus')) {
    document.activeElement.blur();
  }
});

Решение Hammer.JS

В качестве альтернативы вы можете использовать Hammer.JS для обработки ваших жестов касания. Скажем, что вы хотите отклонить это событие tap, но клавиатура должна быть там, если пользователи просто прокручивают страницу (или, допустим, удерживают выделение текста, чтобы он мог скопировать и вставить в область ввода)

В этой ситуации решение будет:

var hammer = new Hammer(document.body);
hammer.on('tap', function(e) {
  if (!$(e.target).is('.search-input') && $('.search-input').is(':focus')) {
    document.activeElement.blur();
  }
});

Надеюсь, что это поможет!

Ответ 9

Для тех, кто использует код Husky в AngularJs, здесь переписывается:

function isTextInput(node) {
    return ['INPUT', 'TEXTAREA'].indexOf(node.nodeName) !== -1;
}

angular.element($document[0]).on('touchstart', function(e) {
  var activeElement = angular.element($document[0].activeElement)[0];
  if(!isTextInput(e.target) && isTextInput(activeElement)) {
    activeElement.blur();
  }
});