Mask.js

What is Mask.js about?

Mask.js is a simple functionality that you can use to force user met a pattern into inputs

Dependencies?

Mask.js works on most jQuery versions.

Main Features

• Accepts any pattern order you would like to use
• In case of dates, it will validates days out of range, and even leap years
• You can use a custom function to handle the non validating inputs
• It will write down any token automatically while you are typing.
• In erasing, tokens will be omitted, and while you are re-typing, them are going to ve pass over

How can I use Mask.js?

There are just a few steps:

1. You have to import mark.js into your project

2. Once imported, just pass the next parameter with you desired configuration:

   var options = {
     $el: jQuery input,
     mask: pattern to apply(described in the next section),
     errorFunction: callback function triggered on every error,
     defaultValue: defaultValue to be shown on initialization(applies on date format),
     hidePlaceholder: boolean for not showing the pattern placeholder,
     isUtc: if the pattern is a date format, utc will be considered
   }
   Mask.newMask(options);
   

3. Pattern is the mask you want to apply over the input. It can be one of the following:

• Any combination of YYYY-MM-DD HH:mm, where:
  • Y means year
  • M means month
  • D means day
  • H means hour
  • m means minutes
• n for typing only numbers
• az for typing only characters
• az/n for typing both characters and numbers

4. Additionaly you can add a number after n or az to limit the maximun characters users can write

Try it out

You can play around with it here: http://bguzmanrio.github.io/maskjs