ukryj klawiaturę w iphone safari webapp

document.activeElement.blur();

Możesz spróbować focus() ing na elemencie nietekstowym, takim jak przycisk submit.

Oto mały fragment kodu, który zawsze ukrywa klawiaturę, gdy fokus znajduje się w polu wejściowym lub tekstowym, a użytkownik stuknie poza tym elementem (normalne zachowanie w przeglądarkach stacjonarnych).

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

Aby wykryć naciśnięcie przycisku return użyj:

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

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

Użycie atrybutu CSS dla elementu focused powoduje rozmycie każdego wejścia, które aktualnie posiada focus, co powoduje usunięcie klawiatury.

Natknąłem się na ten problem i spędziłem trochę czasu do uzyskania zadowalającego rozwiązania. Mój problem nieco różnił się od pierwotnego pytania, ponieważ chciałem odrzucić Zdarzenie wejściowe po dotknięciu poza obszarem elementu wejściowego.

Celowe odpowiedzi powyżej pracy, ale myślę, że nie są kompletne, więc oto moja próba w przypadku, gdy wylądujesz na tej stronie szukając tego samego, co ja:

JQuery solution

Dodajemy touchstart Event listener do całego dokument. Gdy ekran zostanie dotknięty (nie ma znaczenia, czy jest to dotknięcie, przytrzymanie lub przewinięcie), uruchomi obsługę i wtedy sprawdzimy:

1. czy dotknięty obszar reprezentuje wejście?
2. czy dane wejściowe są skupione?

Biorąc pod uwagę te dwa warunki, uruchamiamy Zdarzenie blur(), aby usunąć fokus z wejścia.

ps: byłem trochę leniwy, więc po prostu skopiowałem linię z powyższej odpowiedzi, ale możesz użyć selektora jQuery dla dokumentu w przypadku, gdy chcesz zachowaj spójność kodu

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

Młotek.JS solution

Alternatywnie możesz użyć Młota.JS do obsługi gestów dotykowych. Załóżmy, że chcesz odrzucić to w zdarzeniu tap, ale klawiatura powinna tam być, jeśli użytkownicy tylko przewijają stronę (lub powiedzmy, przytrzymaj zaznaczenie tekstu, aby mógł skopiować to i wkleić do obszaru wprowadzania)

W takiej sytuacji rozwiązaniem byłoby:

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

Pamiętaj, aby ustawić, w CSS:

body {
  cursor: pointer;
}

W przeciwnym razie, twoje wywołanie obsługi zdarzenia document.activeElement.blur() nigdy nie zostanie zwolnione. Więcej informacji: http://www.shdon.com/blog/2013/06/07/why-your-click-events-don-t-work-on-mobile-safari

Dla każdego kto używa kodu Husky ' ego w AngularJs oto przepis:

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