I am having some difficulty convincing myself that users will like masking applied to input fields (Web form). I personally hate it when forms manipulate my input while I'm typing it. I'd rather have error messages popup, or slide down, or something to give me a error/warning. I can usually get the input into the correct format myself.

Other users, perhaps they need some help. So, when is it appropriate to use masking techniques to alter input as the user is typing it into an online form (on-the-fly)?

Examples of masking are shown with this nice jQuery masking plugin.


I've used it without any technical issues. This isn't a technical developer questions, rather user experience question.

Is it appropriate to mask a Date of Birth?


Is it appropriate to mask a currency/amount?

$('#money').mask('000,000,000,000,000.00', {reverse: true});

Should I attempt to mask phone fields.

Masking seems very useful. Are there any pitfalls to masking that I should be concerned about?

1 Answer 1


Remember that a bad user experience is all about Expectation vs Outcome Mismatch

So when a user is entering into an input field, he just expects to fill the field, but when it gets masked automatically(outcome), there is an expectation-outcome mismatch. And hence the irritation.

A simple solution to this is providing a good PLACEHOLDER with the assumed format.

This will let the user assume the format and the masking would seem to help him rather than irritate.

And if still users face irritation, go ahead and use date-pickers and time-pickers. The material design ones are really interesting ones

  • I've been using the "placeholder", but people seem to ignore it. It might be too "light". I'm using bootstrap v3. So, you suggest using both?
    – jjwdesign
    Mar 31, 2016 at 18:11
  • If thats the case, then do go for custom inputs. There a gazillions of bootstrap plugins for each type of input. you must have heard of "bootsnipp.com/resources" Mar 31, 2016 at 18:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.