Home » Web » CSS » Input Masking

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 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

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

Feed Source: CSS-Tricks
Article Source: Input Masking

About Admin

Powered by WP Robot