Input Masking
I don’t have any UX research to cite, but anecdotally, I like it when inputs that expect data in a specific format us an input mask. I thought I’d just line up a few demos for really easy reference.
Robin Herbots’s (jQuery) Inputmask
This is an actively maintained plugin.
See the Pen jQuery Input Masks by Chris Coyier (@chriscoyier) on CodePen.
It requires the jQuery dependency and the bundled plugin is 180 KB (raw), so it’s fairly hefty.
Estelle Weyl’s Input Masking
Estelle created a vanilla JS version:
See the Pen Input Masks by Chris Coyier (@chriscoyier) on CodePen.
No dependencies and 5 KB (raw). There is a React component version as well.
Beware
A quick screen/audio recording of tabbing around a form using JS input masks with VoiceOver enabled. https://t.co/o0ChutJ2XN
— Scott Jehl (@scottjehl) March 28, 2013
I tested the current version of Inputmask, and this is still an issue. Estelle’s version doesn’t do this as the mask is shown via placeholder, not the actual value of the input.
Filament Group’s Politespace
Another crack at an accessible version of masking comes from Filament Group.
See the Pen Politespace by Chris Coyier (@chriscoyier) on CodePen.
It’s different from the others in that you don’t get you use the mask as you are editing the input, it applies formatting after you’ve left it.
Input Masking is a post from CSS-Tricks
