Cordova / Phonegap 3.4.0 iOS 7.1 – Problema de keyboard / vista web

He estado luchando con este tema durante más de una semana y realmente agradecería cualquier ayuda que pueda get. Explicaré el problema tal como lo entiendo, pero corríjalo si digo algo incorrecto.

En iOS 7.0.x, cuando se reveló el keyboard, la vista web se networkingimensionó para que el área que ocupaba el keyboard no se considerara parte del tamaño de window de la window gráfica. Hasta el 7.0, el complemento Cordova Keyboard manejaba el cambio de tamaño de esta vista web. Desde que 7.0 manejó originalmente el keyboard para revelar de la manera deseada, la opción Keyboard shrinkView para el file config.xml convirtió en un "No-Op" a partir de este compromiso:

https://github.com/apache/cordova-plugins/commit/20215013bf91b659b73d5f428ae91dd58be1273a

Sin embargo, en 7.1, el área que ocupa el keyboard aparece en la vista web. Esto tiene un doloroso efecto secundario. Supongamos que desea anteponer un <div> al cuerpo con un área de área de text (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; } 

Cada vez que enfocas o ingresas en el área de text, la vista web reencaminará de forma nativa el campo de input. Como la vista web todavía tiene en count toda la altura de la pantalla, el div no permanecerá fijo en la parte inferior y, por lo tanto, interrumpirá el layout.

He intentado lo siguiente:

  • Futzing con CSS para el cuerpo y div fijo. La position fija / absoluta no parece marcar la diferencia. Establecer una altura explícita para el cuerpo no hace nada.

  • Todas las combinaciones posibles de opciones de metaportales. 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" />

  • Descomentando el "No-op" en el complemento de keyboard Cordova. Esto todavía rompe el layout como lo hizo en iOS 7.0.x.

  • Tener escuchas de events JS en la input y events de focus para seguir calculando el desplazamiento inferior para mantener el div en la parte inferior. Esto es muy nervioso porque lucha contra el comportamiento de la vista web nativa de centrar el campo de input.

  • Alterar la metalabel para establecer una altura explícita después de que se muestre / oculte el keyboard.

Estoy usando Cordova 3.4.0-0.1.3

¿Alguien más ha tenido este problema? ¿Alguna solución o idea?

4 Solutions collect form web for “Cordova / Phonegap 3.4.0 iOS 7.1 – Problema de keyboard / vista web”

Una solución rápida para mí implica forzar a la window a desplazarse hacia atrás en su position cuando la input pierde el foco:

 $("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!

Parece que Ionic tiene una solución de varias partes para este problema que incluye la actualización dinámica de la label de la metapantalla según el dispositivo y también engancharse en el evento ocultar / mostrar del keyboard y luego usar su marco de desplazamiento para desplazar la input a la vista.

Más información aquí .. http://ionicframework.com/blog/ionic-keyboard/

Esto requiere que uses su framework, así que estoy en el process de transferir esto a JQuery e IScroll y te mantendré informado sobre mi progreso.

También publiqué mis experiencias con el keyboard phonegap en el foro de phonegap, pero aún no he tenido mucha respuesta. https://groups.google.com/forum/#!topic/phonegap/LE9-lIsNT2c

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 keyboard. El keyboard simplemente se usa para empujar toda la window gráfica hacia arriba. Después de mucha búsqueda y trabajo duro, pude solucionar parcialmente el problema implementando una animation de contador para mover la barra de título hacia abajo mientras el keyboard estaba subiendo, usando los events de enfoque y desenfoque del campo de text.

iOS 7.0 fue una feliz sorpresa ya que solucionó este problema de forma nativa. Comenté mi solución (afortunadamente, no 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 corrección (¿por qué?). Cuando actualicé a iOS 7.1, la cuestión de la barra de título volvió y ahora no tengo más remedio que descomentar la corrección torpe. ¿Alguien puede dar una solución mejor o permanente para solucionar este problema?

¿Esto resuelve tu problema?

Comtesting tus metatags html por 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" /> 
  • ¿Es posible ocultar la barra de direcciones en iOS 7 Safari?
  • Cordova 3.4 FileReader no funciona (no onloadend)
  • iOS devuelve un valor incorrecto para window.innerHeight / Width
  • La pantalla de presentación de Cordova cambia la position del girador?
  • Reaccionar componentes nativos de UI: RCTBubblingEventBlock / RCTDirectEventBlock no parecen funcionar
  • ¿Qué versión de safari mobile viene con cada versión de iOS?
  • iOS6 Mobile Safari: Períodos de precisión y actualización de geolocation.watchPosition
  • Cómo get acceso a la API de Phonegap desde una página remota
  • Evento KeyDown en iOS, no hay diferencia entre 2 y @
  • ¿Cuál es el estado de los websockets en PhoneGap para iOS?
  • ¿Serán accesibles los JavaScripts embeddeds en un file HTML cargado por WKWebView?
  • El método jQuery .height no establece la altura en iOS Safari
  • Evite la networkingirección de formularios en 204 respuestas en browseres ios
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.