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. 🙂

  • Cómo almacenar los valores de cookies en un dispositivo Android con Phonegap y jQuery Mobile?
  • ¿Qué es jQuery Mobile ?. ¿Es capaz de crear juegos para Android?
  • Los iconos de jQuery Mobile son blancos en lugar de negro en Android
  • Escáner de código de barras zxing en una div fija en phonegap android app
  • Pinch zoom in, zoom out - javascript / jquery / jquery eventos móviles para la web en la plataforma android?
  • Elija una imagen de la cámara o de la galería mediante un mensaje telefónico
  • Android Bottom White Stripe al rellenar contenido Webview
  • JQuery indicador de actividad móvil no se muestra en android
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.