¿Hay alguna manera de tener un campo de entrada numérica enmascarado?

Estoy creando una aplicación HTML5 en un Android y para este escenario específico, tenemos un campo de entrada que es para el código de seguridad de una tarjeta de crédito y queremos forzar que el campo de entrada sea solo numérico y enmascarado.¿Hay alguna manera de tener un campo de entrada numérica enmascarado?

No he tenido suerte buscando este caso específico y de todo lo que puedo decir investigando/probándome es que esto no se puede hacer puramente a través de HTML5 (ya que el número y la contraseña son opciones de tipo y solo se puede usar un tipo). ¿Me estoy perdiendo algo y hay una manera de abrir el teclado numérico mientras se enmascara la entrada a través de HTML5 o hay otra forma de forzar el tipo de entrada del teclado o enmascarar la entrada a través de CSS o JavaScript?

¡Gracias por cualquier ayuda!

Fuente

2011-11-30 JakeW

Cuando dices 'puramente a través de HTML5' ¿realmente quieres decir 'sin JavaScript'? – robertc

Preferiblemente, me gustaría utilizar únicamente los parámetros del campo de entrada; sin embargo, estoy abierto a usar JavaScript. La única solución potencial que puedo pensar es el campo por defecto para escribir el número y en un evento de enfoque cambiar el tipo a la contraseña en JS. No lo he probado, así que no estoy seguro de cómo lo manejaría Android. – JakeW

@ user1074240, ¿te refieres a un campo de número de pin? Si es así, use el campo 'contraseña', pero valide que el valor debe ser numérico. – zzzzBov

Si sólo se requiere para trabajar en los navegadores basados en WebKit, y se permite que el CSS en 'puramente a través de HTML 5', usted podría intentar:

input[type=number] { 
    -webkit-text-security: disc; 
}

No estoy seguro de si hay actualmente ningún equivalente para otros navegadores ~~, en el futuro esto puede ser controlable a través del appearance CSS property~~ . La versión CSS3 de appearance se ha eliminado de la especificación, por lo que parece que tendrá que esperar la estandarización de text-security para una solución de navegador cruzado.

Fuente

2011-11-30 23:13:36 robertc

¡Gracias por eso! funciona muy bien para mi situación ya que solo necesitamos que funcione en Android. – JakeW

También funciona en una vista web de iPhone (por ejemplo, la aplicación PhoneGap) por supuesto. –

Han pasado casi 5 años, pero todavía no puedo encontrar una solución mejor que funcione en cualquier navegador. Así que parece que nada ha sido estandarizado hasta ahora? –

¿Hay alguna manera de tener un campo de entrada numérica enmascarado?

Respuesta

Cuestiones relacionadas