PhoneGap / Sencha Touch: Problema de procesamiento de WebView en ocultar SoftKeyboard

Software

Estoy usando Sencha Touch (2.1.1) y PhoneGap (2.5.0) para desarrollar una aplicación para Android e iOS.

Mi problema

Hay algunas vistas con campos de entrada ( Ext.field.Text y Ext.field.Email ) en la parte inferior de un contenedor. Cuando toca un campo de entrada, aparece el Teclado de software de Android y empuja la vista entera hacia arriba para que el campo de entrada no esté oculto por el teclado.

Ahora, cuando oculta el teclado (presionando el botón Ocultar de Android o pulsando en cualquier lugar que no sea el campo de entrada), WebView no siempre retrocede hasta que vuelva a tocar el WebView.

Hardware

Actualmente estoy enfrentando este problema en un Nexus 4 (Android 4.2.2). Todo funciona bien en iOS (iPhone 4/5) e incluso en el Sony XPERIA Go (Android 4.0.4).

Capturas de pantalla

Aquí hay algunas capturas de pantalla del problema:

La vistaEl teclado empuja la vista superiorEl teclado está cerrado

Ya he descubierto que podría cambiar de Android de windowSoftInputMode para adjustNothing , pero luego no vería el texto escrito hasta que ocultar el teclado …

Actualizar

Algunos comentarios a las 3 mitigaciones de Sergio.

La primera solución parecía ser lo mejor para mí. Sólo afecta al proyecto de Android y no hinchar mi código JS (por ejemplo, if Ext.os.is.Android ... ) o iOS. Desafortunadamente mi Nexus 4 todavía ajusta en foco y no vuelve en la falta de definición si windowSoftInputMode según lo descrito …

La segunda solución suena más compleja. Necesito mover cada componente (alineado abajo) en foco y revertir en la falta de definición, si OS es androide. Aunque esto es definitivamente posible, puede haber otro problema: el usuario puede ocultar el teclado con la tecla de retroceso del dispositivo sin quitar el foco de la entrada (no se desencadena el desenfoque). Así que no creo que sea una solución adecuada.

La tercera solución es apropiada para entradas de números. Pero la escritura de un teclado virtual para la entrada de texto es una tarea difícil: La alineación de las teclas difiere entre las localidades (por ejemplo, y y z se transponen a los teclados alemanes) y no coincidiremos con las expectativas del usuario al ofrecer un teclado alternativo …).

No me malinterpreten, estoy agradecido de que compartieron sus atenuaciones conmigo! Pero todavía no estoy completamente satisfecho.

Sencha Touch 2.2.0 soluciona el problema!

Finalmente he encontrado una solución adecuada. El 15 de abril, Sencha lanzó la versión 2.2.0 de su framework Touch. Después de actualizar desde 2.1.0 el diseño vuelve atrás bien!

Para guardar el tiempo de otros: tenga en cuenta que Sencha Cmd 3.1.x (que es necesario para 2.2.0) no funciona con Ruby 2.0.0. El proceso de generación fallará con algunos mensajes de error extraños. El uso de 1.9.3 funciona bien.

Actualización # 2: Sencha Touch 2.2.1 …

Bueno .. Acabo de actualizar a Sencha Touch 2.2.1 y el problema está de vuelta! Así que si estás planeando usar el último lanzamiento de Sencha Touch, por favor, piensa que el teclado podría bloquear tu diseño: /

Hace unos meses, pasé un montón de tiempo tratando de resolver este problema. Probado un montón de cosas, tamizado a través de Google / StackOverflow.

En última instancia no pude hacer exactamente lo que estaba buscando; No parece que tengamos suficiente control (fácil) sobre el teclado de Sencha Touch / PhoneGap para un montón de cosas (en la parte superior de la posición del teclado, también tenemos básicamente 0 control sobre lo que el "return / go / ok" Botón realmente hace, que varía entre las versiones de Android, especialmente cuando es un campo de número.) Sin embargo:

Mitigación 1: windowSoftInputMode="stateUnspecified|adjustResize" hará que el teclado cubra la entrada, pero una vez que el usuario comience a escribir, la pantalla se ajustará para mostrar la entrada justo encima del teclado y las cosas se revertirán según se desee. Esto es al menos el caso de mi Samsung Galaxy S2 (2.6), Samsung Galaxy S3 (4.2), y Kyocera Rise (4.0).

Mitigación 2: Una solución que implementé fue, en el enfoque de entrada, cambiar la posición de las entradas para garantizar que estarán por encima del teclado. Cuando se borre la entrada, la entrada cambiará a su ubicación original. Esto no es ideal, ya que a menudo verá las entradas de mover a la nueva ubicación antes de que el teclado lo cubre, por lo que parece bastante janky.

Mitigación 3: Para los campos de números, utilicé una versión modificada de https://market.sencha.com/extensions/numpad que creó un teclado virtual y lo configuró como "showBy ()" la entrada requerida. Eso aseguró que el teclado nunca cubrió la entrada y la aplicación no tuvo que lidiar con ningún re-posicionamiento de la pantalla (captura de pantalla abajo).

Problema con la mitigación 3: El problema aquí es que es sólo para los campos de números, y no pude encontrar ningún complemento de teclado estándar para Sencha Touch (mi aplicación está centrada en el número de modo que la limitación era aceptable.) Dicho esto, estoy Seguro de que podría pasar unos días usando el plugin numpad como un núcleo para construir un teclado virtual que podría funcionar de una manera similar.

Lo siento por la falta de una solución perfecta. Espero que esto sea útil!

Introduzca aquí la descripción de la imagen

  • Cómo manejar el dispositivo de nuevo botón en sencha touch aplicación
  • Sencha Touch 2 - Desempeño de Android
  • Diferencia en la representación de la imagen sobre la versión androide diferente
  • Geolocalización de phonegap allways fail on timeout
  • ¿Cómo obtener sólo la ubicación de GPS con sencha touch?
  • Activar evento de clic en la etiqueta de enlace en JS para Android e iPhone
  • PhoneGap 1.4 embalaje Sencha Touch 2.X - ¿Qué pasa con el rendimiento?
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.