jquery móvil ocultar pie de página fijo cuando el teclado

En mi iPhone, quiero que el pie de página se oculte cuando se presiona un campo de texto y aparece el teclado. En este momento solo se está posicionando por encima del teclado y se muestra muy poco del sitio web.

Este es un problema difícil de conseguir “correcto”. Puede intentar ocultar el pie de página en el enfoque del elemento de entrada y mostrarse en desenfoque, pero eso no siempre es confiable en iOS. De vez en cuando (una vez en diez, digamos, en mi iPhone 4S) el evento de enfoque parece no dispararse (o tal vez hay una condición de carrera con JQuery Mobile), y el pie de página no se oculta.

Después de mucho ensayo y error, se me ocurrió esta interesante solución:

  ...various JS and CSS imports...   

Esencialmente: use JavaScript para determinar la altura de la ventana del dispositivo, luego cree dinámicamente una consulta de medios CSS para ocultar el pie de página cuando la altura de la ventana se reduce en 10 píxeles. Debido a que abrir el teclado cambia el tamaño de la pantalla del navegador, esto nunca falla en iOS. Debido a que utiliza el motor CSS en lugar de JavaScript, ¡también es mucho más rápido y suave!

Nota: Encontré el uso de ‘visibilidad: oculta’ menos que la ‘pantalla: ninguna’ o ‘posición: estática’, pero su millaje puede variar.

Agregando a la respuesta de Richard, esto maneja ambas orientaciones en iPhone:

  

PD: fui llevado a este tema por un comentario oculto de esta pregunta .

EDITAR: faltaban algunos tirantes por lo que no tuvo el efecto deseado cuando estaba en el paisaje. Arreglado ahora.

Gran acercamiento Se solucionó mi problema en su mayor parte Lo mejoré reescribiendo el CSS en el cambio de orientación.

   

Esto funciona para mí a lo largo de mi aplicación …

 //hide footer when input box is on focus $(document).on('focus', 'input, textarea', function() { $("div[data-role=footer]").hide(); }); //show footer when input is NOT on focus $(document).on('blur', 'input, textarea', function() { $("div[data-role=footer]").show(); }); 

Un enfoque mucho mejor que encontré fue detectar cuándo una entrada o campo de texto se centra solo en iOS.

Prueba este JS:

 if(/ipad|iphone|ipod/i.test(navigator.userAgent.toLowerCase())) { $(document).on('focus', 'input, textarea', function() { $(".ui-footer").hide(); }); $(document).on('blur', 'input, textarea', function() { $(".ui-footer").show(); }); }