Mask.js is a simple functionality that you can use to force user met a pattern into inputs.
Mask.js works on most jQuery versions.
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:
You have to import mark.js into your project
Once imported, just get the input you want to be masked using jQuery, passing the input as first argument:
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
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
Additionaly you can add a number after n or az to limit the maximun characters users can write
Try it out
Maximum 8 numbers
Only a-z characters
Only a-z characters and numbers, maximum 5 characters