javascript - tutorial - Cordova/Phonegap 3.4.0 iOS 7.1-Problema con la vista de teclado/web
apache cordova tutorial (4)
He estado luchando con este problema durante más de una semana y realmente agradecería cualquier ayuda que pueda obtener. Explicaré el problema tal como lo entiendo, pero corríjalo si digo algo incorrecto.
En iOS 7.0.x, cuando se reveló el teclado, la vista de la web se redimensionó de modo que el área que tomó el teclado no se consideraba parte del tamaño de la ventana de la ventana gráfica. Hasta la versión 7.0, el complemento del teclado Cordova manejaba el cambio de tamaño de esta vista web. Desde que 7.0 manejó de forma nativa la revelación del teclado de la forma deseada, la opción de shrinkView del teclado para el archivo config.xml convirtió en un "No-op" a partir de esta confirmación:
https://github.com/apache/cordova-plugins/commit/20215013bf91b659b73d5f428ae91dd58be1273a
Sin embargo, en 7.1, el área que ocupa el teclado aparece en la vista web. Esto tiene un efecto secundario doloroso. Supongamos que desea añadir un <div> al cuerpo con un área de área de texto (como dejar un comentario o una respuesta de chat), es decir;
<body>
<div id="app">...</div>
<div id="reply">
<textarea></textarea>
</div>
</body>
ejemplo CSS:
body {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
overflow: hidden;
}
#reply {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
Cuando te enfocas o ingresas en el área de texto, la vista web volverá a centrar el campo de entrada de forma nativa. Dado que la vista web aún tiene en cuenta toda la altura de la pantalla, el div no se mantendrá fijo en la parte inferior y, por lo tanto, rompe el diseño.
He intentado las siguientes cosas:
Futzing con el CSS para el cuerpo y div fijo. La posición fija / absoluta no parece hacer una diferencia. Establecer una altura explícita para el cuerpo no hace nada.
Todas las combinaciones posibles de opciones de meta viewport. Esto es lo que estoy usando actualmente:
<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, height=device-height, minimal-ui" />
Sin comentar "No-op" en el complemento de teclado de cordova. Esto todavía rompe el diseño como lo hizo en iOS 7.0.x.
Tener oyentes de eventos JS en los eventos de
inputyfocuspara seguir calculando el desplazamiento inferior para mantener el div en la parte inferior. Esto es muy agitado porque está luchando contra el comportamiento de la vista web nativa de centrar el campo de entrada.Alterar la etiqueta meta para establecer una altura explícita después de que se muestre / oculte el teclado.
Estoy usando Cordova 3.4.0-0.1.3
¿Alguien más ha tenido este problema? ¿Soluciones o ideas?
¿Resuelve esto tu problema?
Revisa tus metaetiquetas html para algo como esto:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
Reemplázalo con esto:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
Estoy experimentando un problema similar. Tengo una aplicación Cordova 3.3.0 en combinación con Sencha Touch.
El problema al que me enfrentaba antes de iOS 7.0 era que la barra de título iba más allá de la parte superior de la pantalla cuando apareció el teclado. El teclado simplemente se utiliza para empujar toda la vista hacia arriba. Después de mucha búsqueda y trabajo duro, pude solucionar parcialmente el problema al implementar una animación de contador para mover la barra de título hacia abajo mientras el teclado subía, usando los eventos de enfoque y desenfoque del campo de texto.
iOS 7.0 fue una feliz sorpresa, ya que solucionó este problema de forma nativa. Comenté mi corrección (afortunadamente, no la eliminé) y la barra de título permaneció fija en la parte superior sin ningún esfuerzo adicional.
Parece que iOS 7.1 ha revertido esa solución (me pregunto por qué ??). Cuando actualicé a iOS 7.1, el problema de la barra de título regresó y ahora no tengo más remedio que descomentar la solución torpe. ¿Alguien puede dar una solución mejor o permanente para solucionar este problema?
Parece que Ionic tiene una solución multiparte para este problema que incluye actualizar dinámicamente la etiqueta de meta viewport dependiendo del dispositivo y también al enganchar en el evento de ocultar / mostrar teclado y luego usar su marco de desplazamiento para desplazar la entrada a la vista.
Más información aquí .. http://ionicframework.com/blog/ionic-keyboard/
Esto requiere que uses su marco, así que estoy en el proceso de trasladar esto a JQuery e IScroll y te mantendré informado sobre mi progreso.
También publiqué mis experiencias con el teclado de phonegap en el foro de phonegap pero aún no he recibido muchas respuestas. https://groups.google.com/forum/#!topic/phonegap/LE9-lIsNT2c
Una solución rápida para mí involucraba forzar a la ventana a desplazarse de nuevo a su posición cuando la entrada pierde el enfoque:
$("input").on(''blur'',function(){
//set brief timeout to let window catch up
setTimout(function(){
//reposition at top left corner of screen
window.scrollTo(0,0);
},20);
});
¡Espero que ayude!