jquery.inputmask is a jquery plugin which create an input mask. An inputmask helps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers, ...
jquery.inputmask
Copyright (c) 2010 - 2013 Robin Herbots Licensed under the MIT license (https://www.opensource.org/licenses/mit-license.php)
jquery.inputmask is a jquery plugin which create an input mask.
An inputmask helps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers, ...
Highlights:
- easy to use
- optional parts anywere in the mask
- possibility to define aliases which hide complexity
- date / datetime masks
- numeric masks
- lots of callbacks
- non-greedy masks
- many features can be enabled/disabled/configured by options
- supports readonly/disabled/dir="rtl" attributes
- support data-inputmask attribute
- multi-mask support
- regex-mask support
Usage:
Include the js-files which you can find in the dist-folder. You have the bundled file which contains the main plugin code and also all extensions. (date, numerics, other) or if you prefer to only include some parts, use the separate js-files in the dist/min folder.
The minimum to include is the jquery.inputmask.js
html
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.inputmask.js" type="text/javascript"></script>
Define your masks:
javascript
$(document).ready(function(){
$("#date").inputmask("d/m/y"); //direct mask
$("#phone").inputmask("mask", {"mask": "(999) 999-9999"}); //specifying fn & options
$("#tin").inputmask({"mask": "99-9999999"}); //specifying options only
});
or
html
<input data-inputmask="'alias': 'date'" />
<input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />
<input data-inputmask="'mask': '99-9999999'" />
javascript
$(document).ready(function(){
$(":input").inputmask();
});
Learn more:
