Mask.js – force user met a pattern into inputs

Download   Demo

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

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

1. INCLUDE JS FILES

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://rawgit.com/bguzmanrio/maskjs/master/js/mask.js"></script>

2. HTML

<input id="maskExample1"><span>YYYY-DD/MM HH:mm</span>

3. JAVASCRIPT

var options = {
  $el: $("#maskExample1"),
  mask: ""YYYY-DD/MM HH:mm"",
  errorFunction: callback function triggered on every error,
  defaultValue: Date.now(),
  isUtc: true
}
Mask.newMask(options);

4. OPTIONS

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),
 isUtc: if the pattern is a date format, utc will be considered
}

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