plugin - Ver redibujado en la posición incorrecta después de cerrar el teclado-Cordova/PhoneGap-Android

config.xml phonegap

Question

Tengo una aplicación de Cordova (usando el framework angularjs), aquí está mi vista:

Cuando enfoco una entrada que requiere que la vista se mueva hacia arriba para mantener la entrada visible cuando el teclado (en pantalla) se muestra así:

Cuando cambio el enfoque de la entrada a otra parte (desenfoque), el teclado se cierra (como debería) pero vuelve a dibujar la vista en la posición incorrecta:

Cuando inspecciono con Chrome, muestra todos los elementos en la posición que deberían estar y no donde están en la pantalla:

No tengo ni idea de qué está causando este error, intenté volver a dibujar la vista en el método onDraw , lo que onDraw infinitamente la vista para ver si eso lo solucionaba, pero fue en vano. ¿Algunas ideas?

Detalles adicionales
Versión de Cordova: 3.5.0-0.2.4
Dispositivo: Nexus 10 - Android 4.4.4

Answer 1

Pude solucionar el problema en nuestra aplicación agregando el siguiente ''truco'' a mi código de botón de envío.

$(''html, body'').scrollTop(0);
$(''#usernamefield'').blur();
$(''#passwordfield'').blur();
$(''#loginform_submit'').blur();

Así que obligué a los elementos html y body a desplazarse hacia la parte superior y también me aseguré de que ningún elemento tuviera el foco, por lo que el teclado desaparecería antes de continuar.

Espero que esto te ayude también.

/ Mika

Answer 2

He encontrado un fix / hack, no es genial, sin embargo es mejor que nada.

Al ocultar la etiqueta html y volver a mostrarla, vuelve a dibujar la vista correctamente.

 fixAndroidKitkatDisplayBug: function () {
        $(document).on(''blur'', ''input'', function () {
            var htmlTags = document.getElementsByTagName(''html'');
            var html = htmlTags[0];
            html.style.display = ''none'';
            html.offsetHeight; // no need to store this anywhere, the reference is enough
            html.style.display = ''block'';
        });
    }

Luego en el index.js, después de "onDeviceReady" llamo a este método como tal

setTimeout(function (){
    if (typeof(device) != ''undefined'' && device.platform && device.platform == "Android" && device.version && parseFloat(device.version) == 4.4) {
       fixAndroidKitkatDisplayBug();
    }
}, 100);

(Para mí, necesitaba el setTimeout para que se definiera el dispositivo)

Answer 3

Tuve el mismo problema. Pero resuelvo usando este código jQuery.

$(''input'').on(''blur'',function(){
    document.body.scrollTop = 0;
})

Me funcionó

Answer 4

Me enfrenté a un problema idéntico con Sencha Touch en Android 4.4.2, y finalmente esto lo hizo funcionar:

if (Ext.os.is(''Android'')) {
window.repaint = {};
//dirty fix for screen is scrolling down when user hides keyboard
window.onresize = function() {
    var repaintFn = function() {
        Ext.defer(function() {
            var body = document.body;
            window.repaint.isRepainting = false;
            if (window.repaint.counter < 3) {
                window.repaint.counter++;
                body.style.overflow = (body.style.overflow == ''hidden'') ? ''auto'' : ''hidden'';
                repaintFn.call(this);
            }
        }, 1500, this);
    };
    if (!window.repaint.isRepainting) {
        repaintFn.call(this);
        window.repaint = {
            counter: 0,
            isRepainting: true
        };
    }
};

}

La línea que hace el truco es:

body.style.overflow = (body.style.overflow == ''hidden'') ? ''auto'' : ''hidden'';

El resto del código consiste en llamar a la misma función 4 veces con un retraso, para garantizar que funcione incluso en dispositivos de bajo rendimiento, donde puede haber un desfase entre el disparo del evento de cambio de tamaño y la pantalla que realmente se desplaza hacia abajo.