скрыть клавиатуру в веб-приложении для iphone Safari

Question

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

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

Answer 1

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

Answer 2

document.activeElement.blur();

Answer 3

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

Answer 4

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

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

Answer 5

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

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

Answer 6

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

Целенаправленные ответы выше работают, но я думаю, что они не полны, поэтому вот моя попытка, если вы зайдете на эту страницу в поисках того же, что и я:

Решение jQuery

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

1. Представляет ли область касания ввод?
2. Сфокусирован ли ввод?

Учитывая эти два условия, мы затем запускаем событие 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();
  }
});

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

Answer 7

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

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

Answer 8

Обязательно установите в CSS:

body {
  cursor: pointer;
}

в противном случае ваш обработчик событий, вызывающий document.activeElement.blur(), никогда не будет запущен. Для получения дополнительной информации см .: http://www.shdon.com/blog/2013/06/07/why-your-click-events-don-t-work-on-mobile-safari

Answer 9

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

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