iphone - teclado - texto predictivo literatura

ocultar teclado en iphone safari webapp

Question

Estoy creando una aplicación web para iPhone, basada en HTML / CSS / JS. Estoy usando formularios para recibir información y pasar datos al script, pero un problema que encuentro es que el teclado no desaparecerá. El usuario ingresará la información, presionará enviar, y ya que es JavaScript, la página no se vuelve a cargar. El teclado permanece en su lugar, lo que es una molestia y agrega otro paso para los usuarios (tener que cerrarlo).

¿Hay alguna forma de forzar el teclado en Safari para que desaparezca? Esencialmente, tengo la sensación de que esta pregunta es equivalente a preguntar cómo puedo forzar un cuadro de entrada para que pierda el enfoque o se difumine. Al buscar en línea, encuentro muchos ejemplos para detectar el evento borroso, pero ninguno para forzar este evento.

Answer 1

Aún más simple, puedes llamar a blur () en el elemento enfocado actualmente. $ ("# inputWithFocus"). blur ()

Answer 2

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

Answer 3

Asegúrese de establecer, en CSS:

body {
  cursor: pointer;
}

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

Answer 4

Me encontré con este problema y he pasado algún tiempo hasta obtener 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 anteriores funcionan pero creo que no están completas, así que aquí está mi intento en caso de que encuentre esta página buscando lo mismo que yo:

solución jQuery

touchstart un touchstart eventos touchstart a todo el documento. Cuando se toca la pantalla (no importa si se trata de un toque, una retención o un desplazamiento), se activará el controlador y luego verificamos:

1. ¿El área tocada representa la entrada?
2. ¿Está enfocada la entrada?

Dadas estas dos condiciones, entonces activamos un evento blur() para eliminar el enfoque de la entrada.

ps: estaba un poco flojo, así que solo copié la línea de la respuesta anterior, pero puede usar el selector jQuery para el documento en caso de que quiera 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.JS solucion

Alternativamente, puedes usar Hammer.JS para manejar tus gestos táctiles. Digamos que desea descartar eso en un evento de tap , pero el teclado debería estar allí si los usuarios simplemente están desplazando la página (o, digamos, mantenga una selección de texto para que pueda copiar eso y pegarlo en su á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 eso ayude!

Answer 5

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

Answer 6

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

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

Answer 7

Puede intentar focus() en un elemento que no sea de texto, como el botón enviar.

Answer 8

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

Al usar el atributo CSS para el elemento enfocado, esto desdibuja cualquier entrada que actualmente tenga foco, eliminando el teclado.

Answer 9

document.activeElement.blur();