Ads

Wednesday, 10 December 2014

Mask.js - force user met a pattern into inputs

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

No comments:

Post a Comment