ocultar teclado en iphone safari webapp

document.activeElement.blur();

Puedes probar focus() ing en un elemento que no sea texto, como el botón enviar.

Aquí hay un pequeño fragmento de código que siempre oculta el teclado cuando el foco está en un campo de entrada o área de texto y el usuario toca fuera de ese elemento (el comportamiento normal en los navegadores de escritorio).

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

Para detectar cuando se presiona el botón de retorno use:

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

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

Usando el atributo CSS para el elemento enfocado, esto difumina cualquier entrada que actualmente tenga foco, eliminando el teclado.

Me encontré con este problema y he pasado algún tiempo hasta conseguir una solución satisfactoria. Mi problema era ligeramente diferente de la pregunta original, ya que quería descartar el evento de entrada al tocar fuera del área del elemento de entrada.

Las respuestas propuestas anteriormente funcionan, pero creo que no están completas, así que aquí está mi intento en caso de que aterrice esta página buscando lo mismo que yo:

JQuery solution

Añadimos un receptor de eventos touchstart al todo documento. Cuando se toca la pantalla (no importa si se trata de un toque, mantener pulsado o desplazarse) se activará el controlador y luego vamos a comprobar:

1. ¿El área tocada representa la entrada?
2. ¿Se centra la entrada?

Dadas estas dos condiciones, disparamos un evento blur() para eliminar el foco de la entrada.

pd: Era un poco perezoso, así que simplemente copié la línea de la respuesta anterior, pero puede usar el selector de jQuery para el documento en caso de que desee mantener la coherencia del código

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

Hammer.Solución JS

Alternativamente puedes usar Hammer.JS para manejar tus gestos táctiles. Digamos que quieres descartar eso en un evento tap, pero el teclado debería estar allí si los usuarios solo están desplazándose por la página (o digamos, mantener una selección de texto para que pueda copiarlo y pegarlo en el área de entrada)

En esa situación, la solución sería:

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

Espero que ayude!

Asegúrese de establecer, en CSS:

body {
  cursor: pointer;
}

De lo contrario, el controlador de eventos que llame a document.activeElement.blur() nunca se activará. Para más información, ver: http://www.shdon.com/blog/2013/06/07/why-your-click-events-don-t-work-on-mobile-safari

Para cualquiera que use el código de Husky en AngularJS aquí está la reescritura:

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