Maskjs

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 get the input you want to be masked using jQuery, passing the input as first argument:

   Mask.newMask(options);

   Where options is a JS object containing the following attributes:

   {
       $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
   }
               

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