No tengo ninguna investigación de UX para citar, pero anecdóticamente, me gusta cuando las entradas que esperan datos en un formato específico usan un máscara de entrada. Pensé en alinear algunas demostraciones para una referencia realmente fácil.
Máscara de entrada de Robin Herbots (jQuery)
Este es un complemento de mantenimiento activo.
Consulte las máscaras de entrada de Pen jQuery de Chris Coyier (@chriscoyier) en CodePen.
Requiere la dependencia de jQuery y el complemento incluido es de 180 KB (sin procesar), por lo que es bastante considerable.
Enmascaramiento de entrada de Estelle Weyl
Estelle creó una versión vainilla JS:
Consulte las máscaras de entrada de lápiz de Chris Coyier (@chriscoyier) en CodePen.
Sin dependencias y 5 KB (sin formato). También hay una versión del componente React.
Tener cuidado
Una grabación rápida de pantalla / audio de tabulación alrededor de un formulario utilizando máscaras de entrada JS con VoiceOver habilitado. https://t.co/o0ChutJ2XN
– Scott Jehl (@scottjehl) 28 de marzo de 2013
Probé la versión actual de Inputmask y esto sigue siendo un problema. La versión de Estelle no hace esto ya que la máscara se muestra a través de placeholder, no el valor real de la entrada.
Politespace de Filament Group
Otra grieta en una versión accesible de enmascaramiento proviene de Filament Group.
Vea Pen Politespace de Chris Coyier (@chriscoyier) en CodePen.
Es diferente de los demás en que no puede usar la máscara mientras edita la entrada, aplica formato después de haberla dejado.