Input Masking

Avatar of Chris Coyier
Chris Coyier on

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

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

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

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.