Join FlipAndroid.COM Telegram Group: https://t.me/joinchat/F_aqThGkhwcLzmI49vKAiw


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

FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.