2010-12-20 12 views
13

Así que he creado una aplicación HTML5 bonita y brillante que está orientada a Safari móvil y al navegador predeterminado de Android. Las versiones de Android en las que lo estoy probando son 2.1 y 2.2.Android Browser textarea se desplaza por todo el lugar, es inutilizable

Mi aplicación tiene un área de texto en una de sus páginas, y esta área de texto tiende a tener una buena cantidad de texto a veces. Es básicamente un campo de escritura de forma libre.

Esto funciona como se esperaba en iOS. Sin embargo, en Android, mientras escribes, la pantalla se desplaza salvajemente arriba y abajo con cada pulsación de tecla, a menudo no puedes ver qué estás escribiendo mientras escribes, y te mareas de todos los saltos. Además, si el contenido dentro del área de texto excede su altura, parece imposible desplazarse dentro de él.

Ni siquiera me inicie en el modo horizontal. Los problemas anteriores son aún más pronunciados allí.

Esto se siente como un error con Android, ya que realmente no hay nada elegante en mi área de texto. Lo he reducido a lo esencial, y se comporta de la misma manera.

¿Se pregunta si alguien más se ha divertido tanto con sus áreas de texto en Android, y quizás podría dar algunos consejos, o al menos empatizar?

Parece que Google ha logrado resolver sobre todo esto en la interfaz web de Gmail para Android. Supongo que hay algo de magia JS porque mi markup/CSS es idéntico.

Respuesta

0

Experimento este comportamiento en casi todas las páginas. Aquí en StackOverflow, en un blog de WordPress y muchos más.

sólo puedo imagen que trata de un error de usabilidad/problema en el navegador de Android y es por eso prefiero nativo de interfaz de usuario/aplicación :)

1

No hay una respuesta mágica. Las interacciones de entrada con el teclado Android con formularios web son simplemente terribles. Debe enhebrar la aguja con mucho cuidado para que funcione correctamente, y el comportamiento del teclado no es el mismo en todas las versiones de Android. Pero es posible con MUCHO trabajo (consulte nuestro marco Sencha Touch para saber lo que es posible hoy en día: los otros frameworks web móviles también abordan exactamente los mismos problemas).

+0

Lo extraño es que quiero tener solo una funcionalidad básica de texto, como desplazarse, escribir y mover el cursor. Puedo hacer esas cosas en Gmail más o menos, pero en mi propia página, no. Parece que hay algo específicamente en su camino. Tal vez es la biblioteca jQTouch que estoy usando. – Eschaton

9

SOLUCIÓN: El webkit 3D está roto en Android, esto está causando este problema. Asegúrese de no estar utilizando -webkit-transform: translate3d (0, 0, 0); o -webkit-backface-visibility: oculto; en cualquier cosa relacionada con las entradas. :(

+0

solución funcionó para mí. Estaba rompiendo mi cabeza contra el escritorio durante horas después mi texto de repente dejó de funcionar b/c. He añadido un translate3d (0,0,0) a mi estafa tainer div. ¡Gracias! – istan

4

Si es posible, puede bloquear el desplazamiento de la pantalla mientras el usuario está escribiendo estableciendo la propiedad de desbordamiento del cuerpo en 'oculto' - puede habilitarlo/deshabilitarlo selectivamente en los eventos de enfoque/desenfoque. Por supuesto, esto significa que su usuario no podrá desplazarse mientras escribe

+0

¡Gracias por la sugerencia! En mi caso, el campo de entrada estaba en una posición: div fijo que cubría la página subyacente. Cada vez que el campo se enfocaba (desde un toque), la página cubierta se desplazaba violentamente a medida que el teclado suave de Android aparecía y desaparecía repetidamente. Desbordamiento de configuración: oculto en el cuerpo cuando se muestra la superposición parece evitar el comportamiento loco. Tendré que guardar la posición de desplazamiento de la página de antemano y restaurarla después. –

Cuestiones relacionadas