¿Cómo puedo diseñar una etiqueta HTML INPUT para que mantenga CSS cuando se centre en Android 2.2+?

Me alegró descubrir que Android 2.2 soporta la posición: selector fijo de CSS. He creado una simple prueba de concepto, aquí:

Http://kentbrewster.com/android-scroller/scroller.html

… que funciona como un encanto. Cuando intento agregar una etiqueta de ENTRADA a mi cabecera, sin embargo, golpeo el apuro. En el enfoque, cada dispositivo que he probado hasta ahora clones la etiqueta INPUT, le da un índice Z infinito, y repintar en la parte superior de la etiqueta antigua. El clon se encuentra aproximadamente en la posición correcta, pero la mayoría de los CSS de su padre (incluyendo, por supuesto, la posición: fijo) se ignora. La etiqueta INPUT clonada tiene el tamaño y la forma incorrectos, y cuando desplazo el cuerpo de la página, se desplaza hacia arriba y hacia fuera de la pantalla.

Una vez que está fuera de la pantalla, la hilaridad se produce. A veces, el dispositivo obligará a la parte desplazable del cuerpo a retroceder para que el espacio en blanco clonado vuelva a la vista; A veces el teclado desaparece aunque la caja visible parece permanecer en foco; A veces el teclado no se puede descartar a pesar de que el espacio en blanco INPUT está claramente borrosa. Este es un ejemplo que puedes ejecutar en tu dispositivo Android 2.2 para ver qué está pasando:

Http://kentbrewster.com/android-input-style-bug/

Estilo de entrada: el enfoque no ha hecho el truco para mí todavía, ni tienen muchos diferentes intentos de fuerza bruta para escuchar el enfoque () y desenfoque () con JavaScript y hacer lo correcto con el enfoque y el teclado.

Muchas gracias por su ayuda,

Kent

Esto probablemente no se resolverá hasta que Android cambie a usar Chrome para su WebView. El navegador Android actual crea un Android TextView en la parte superior de la página cuando se centra un campo de entrada HTML. Al parecer, no estilo o posición correctamente. Usted puede ver que va más mal en las páginas que utilizan contentEditable.

El Chrome-for-Android actual implementa la interfaz WebKit IME, por lo que los campos de entrada son dibujados por WebKit (y pierden algunas de las sutilezas del Android TextView en ICS) y no deberían tener problemas como este.

La solución es agregar:


     Entrada {
         -webkit-user-modify: read-write-plaintext-only;
         -webkit-tap-highlight-color: rgba (255,255,255,0);
     }

En su css.

Es posible que pueda solucionarlo utilizando un error en Android: http://code.google.com/p/android/issues/detail?id=14295 .

Es decir, no muestre el campo de entrada de inmediato. En su lugar, muestre una div superposición que escucha el clic y se oculta y muestra la entrada oculta, y dar el enfoque de entrada. De alguna manera, esto evita que Android utilice la entrada extraña que se coloca en la parte superior de todo, y en su lugar está utilizando el campo de entrada de navegadores que puede estilo de cualquier manera que desee.

Como notarás en el bug raport sin embargo, esto no funciona con input [type = "number"] …

  • Detectar la compatibilidad con la entrada de archivos del navegador
  • ¿Qué es un fallback para el "icono de hamburguesa" o entidad HTML & # 9776 ;?
  • ¿Por qué el Samsung Galaxy S ignora la metaetiqueta escalable por el usuario?
  • JQuery panel móvil no se cierra completamente sólo en el navegador de Android
  • La codificación de html de Android 4.0 se descompone en la vista web
  • Aplicación Web: ocultar una div excepto los navegadores android
  • El primer fotograma del vídeo de fondo no se muestra en Android
  • Android webView - cómo cambiar el color de fondo del diálogo webView?
  • ¿Cómo aplicar span de fila en tablelayout?
  • Chrome en android redimensiona la fuente
  • Webkit para Android: Los elementos con posicionamiento absoluto no respetan el índice z
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.