JQuery El pie fijo móvil se mueve cuando aparece el teclado

He diseñado una aplicación con Phonegap y jQuery Mobile. El pie de página fijo funciona correctamente hasta que hago clic en un campo desplegable o de texto, lo que hace que el pie de página desaparezca de la vista (Android 4.0) o se mueva al centro de la vista (Android 2.2 Galaxy Tab). ¿Alguna sugerencia?

Phonegap Versión: Cordova 2.1.0
JQuery Versión Móvil: 1.2.0

Aquí está mi código:

<div data-role="footer" class="nav-mobilyzer" data-tap-toggle="false" data-position="fixed"> <div data-role="navbar" class="nav-mobilyzer" data-grid="d"> <h1>footer</h1> </div> </div> 

6 Solutions collect form web for “JQuery El pie fijo móvil se mueve cuando aparece el teclado”

Tuve el problema en algunos dispositivos el pie de página se muestra y en otros no lo hizo. Me pareció que funcionó para mí:

 var initialScreenSize = window.innerHeight; window.addEventListener("resize", function() { if(window.innerHeight < initialScreenSize){ $("[data-role=footer]").hide(); } else{ $("[data-role=footer]").show(); } }); 

EDITAR:

Pero ¿qué pasa con los cambios de orientación?

 var portraitScreenHeight; var landscapeScreenHeight; if(window.orientation === 0 || window.orientation === 180){ portraitScreenHeight = $(window).height(); landscapeScreenHeight = $(window).width(); } else{ portraitScreenHeight = $(window).width(); landscapeScreenHeight = $(window).height(); } var tolerance = 25; $(window).bind('resize', function(){ if((window.orientation === 0 || window.orientation === 180) && ((window.innerHeight + tolerance) < portraitScreenHeight)){ // keyboard visible in portrait } else if((window.innerHeight + tolerance) < landscapeScreenHeight){ // keyboard visible in landscape } else{ // keyboard NOT visible } }); 

La tolerancia explica el cálculo inexacto de la altura del paisaje con el ancho del retrato y viceversa.

Bueno, este hilo es tan antiguo como el Internet en este momento, pero la respuesta anterior no parecía hacer el trabajo para mí.

La mejor manera que encontré fue enlazar un método con el evento jquery .blur () y luego llamar a fixedtoolbar () métodos en un orden muy específico, es decir

  var that = this; $(':input').blur(function(){ that.onFocusLoss(); }); 

……

 onFocusLoss : function() { try { $("[data-position='fixed']").fixedtoolbar(); $("[data-position='fixed']").fixedtoolbar('destroy'); $("[data-position='fixed']").fixedtoolbar(); console.log('bam'); } catch(e) { console.log(e); } }, 

El teclado se abre cuando tenemos el foco en una entrada así:

 // hide the footer when input is active $("input").blur(function() { $("[data-role=footer]").show(); }); $("input").focus(function() { $("[data-role=footer]").hide(); }); 

También puede detectar cuando el teclado muestra y cuando se esconde y mostrar u ocultar su pie de página en consecuencia:

 document.addEventListener("showkeyboard", function(){ $("[data-role=footer]").hide();}, false); document.addEventListener("hidekeyboard", function(){ $("[data-role=footer]").show();}, false); 

Intente data-hide-during-focus = "" y establézcalo en una cadena vacía.

Mi solución utiliza otro atributo JQUERY en el pie de página div. La adición de datos fullscreen = "true" a esa div era todo lo que necesitaba. Sé que esta corrección podría no haber estado disponible hasta hace poco, pero estoy usando jqm 1.3.2 y jq 1.9. Pensé que publicaría esta solución sólo en caso de que ayuda a alguien. Buena suerte. 🙂

  • Mejores prácticas phonegap architecture
  • ¿Necesito agregar app.initialize () en todos mis archivos html en un proyecto cordova / phonegap
  • ScrollTop no funciona en móviles Android
  • JQuery y la compatibilidad del navegador móvil?
  • JQuery móvil deshabilitar el contenido de la página desplazamiento vertical
  • Error "La conexión con el servidor no tuvo éxito." En Cordova y jQuery
  • PhoneGap: caída de la aplicación que toma la imagen del retrato
  • La forma de Córdoba no se envía o los botones no funcionan (android +4.4)
  • No se puede llamar a determinedVisibility () - nunca vio una conexión para el pid - No navegar a la página Html
  • Problema de compatibilidad de Phonegap-Jquery en Android
  • jquery mobile events en android contra iphone
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.