I don’t have any UX research to cite, but anecdotally, I like it when inputs that expect data in a specific format use an input mask. I thought I’d just line up a few demos for really easy reference.
Robin Herbots’s (jQuery) Inputmask
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:
No dependencies and 5 KB (raw). There is a React component version as well.
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.
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.
CSS Tricks Go to Source
Author: Chris Coyier
Powered by WPeMatico