Saltar al contenido

Cómo evitar que el teclado empuje hacia arriba la vista web en la aplicación iOS usando phonegap

Solución:

En foco, establezca window.scrollTo (0,0); Esto evita que el teclado suba completamente la vista web

$('input').on('focus', function(e) {
    e.preventDefault(); e.stopPropagation();
    window.scrollTo(0,0); //the second 0 marks the Y scroll pos. Setting this to i.e. 100 will push the screen up by 100px. 
});

Si tu no quiero establecer un valor estático para su posición de desplazamiento Y, no dude en usar este breve complemento que he escrito que alinea automáticamente el teclado debajo del campo de entrada. No es perfecto, pero funciona. Simplemente llame a esto en foco como se muestra arriba:

setKeyboardPos(e.target.id);

Resolvió este problema usando driftyco / ionic-plugins-keyboard (https://github.com/driftyco/ionic-plugins-keyboard)

Primero instale el complemento de teclado:

cordova plugin add com.ionic.keyboard

Ahora usted puede I) deshabilite el desplazamiento del teclado nativo:

cordova.plugins.Keyboard.disableScroll(true);

o II) escucha native.keyboardshow evento en deviceready y desplácese hacia arriba cuando el teclado muestre:

window.addEventListener('native.keyboardshow', keyboardShowHandler);

function keyboardShowHandler(e){
    setTimeout(function() {
        $('html, body').animate({ scrollTop: 0 }, 1000);
    }, 0);
}

Usé el enfoque II) porque me gustó el desplazamiento animado en mi caso. Si no quiere seguir con la animación, reemplace la línea correspondiente con window.scrollTo(0, 0);. Pero me temo que en ese caso tendrás que lidiar de nuevo con esta “animación de jitter de basura”. Imskull escribi sobre.

Tuve el mismo problema y ninguna de las soluciones anteriores me ayudó, pero encontré una manera simple de superarlo.

En la carpeta plataforma / android, abra manifest.xml y en la etiqueta de actividad principal reemplace el atributo android: windowSoftInputMode = “adjustResize” con android: windowSoftInputMode = “adjustPan”

ahora el teclado se superpondrá a tu contenido.

Espero que ayude a alguien.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *