texto - label html para que sirve

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

Question

Me alegré al descubrir que Android 2.2 admite la posición: selector de CSS fijo. Construí un concepto de prueba simple, aquí:

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

... que funciona como un encanto. Cuando intento agregar una etiqueta INPUT a mi encabezado, sin embargo, me toco problema. En foco, cada dispositivo que he probado hasta ahora clona la etiqueta INPUT, le da un índice Z infinito y lo repinta sobre la etiqueta anterior. El clon está más o menos en la posición correcta, pero la mayor parte del CSS de sus padres (incluida, por supuesto, la posición: fija) se ignora. La etiqueta de ENTRADA clonada tiene el tamaño y la forma incorrectos, y cuando me desplazo por el cuerpo de la página, se desplaza hacia arriba y hacia afuera de la pantalla.

Una vez que está fuera de la pantalla, la hilaridad se produce. En ocasiones, el dispositivo fuerza a la parte del cuerpo hacia abajo para que el blanco clonado vuelva a estar a la vista; a veces el teclado desaparece aunque el cuadro visible parece permanecer enfocado; a veces el teclado no se puede descartar aunque el espacio en blanco de ENTRADA sea claramente borroso. Aquí hay un ejemplo que puede ejecutar en su dispositivo Android 2.2 para ver lo que está sucediendo:

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

Entrada de estilo: el enfoque aún no me ha convencido, ni tengo muchos intentos diferentes de fuerza bruta para escuchar el enfoque () y el desenfoque () con JavaScript y hacer lo correcto con el foco y el teclado.

Muchas gracias por su ayuda,

--Kent

Answer 1

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

Es decir, no visualice el campo de entrada de inmediato. En su lugar, muestra un div de superposición que escucha al hacer clic y se oculta y muestra la entrada oculta, y le da el foco de entrada. Esto de alguna manera impide que Android use la entrada extraña que se coloca encima de todo y, en su lugar, usa el campo de entrada de los navegadores, que puede diseñar de la forma que desee.

Sin embargo, como notará en el informe de errores, esto no funciona con la entrada [type = "number"] ...

Answer 2

Esto probablemente no se resuelva hasta que Android cambie a usar Chrome para su WebView. El navegador actual de Android crea un Android TextView en la parte superior de la página cuando se enfoca un campo de entrada HTML. Aparentemente no lo estilizan ni lo colocan correctamente. Puede ver que va más mal en páginas que usan contentEditable.

El actual Chrome-for-Android 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.

Answer 3

La solución es agregar:

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

en tu css.