Inputmask/README

jquery.inputmask is a jquery plugin which create an input mask ;-)

The plugin is based on the maskedinput plugin of Josh Bush (http://digitalbush.com/projects/masked-input-plugin), but has finer control over the 'mask-definitions' and is fully compatible with the ui-datepicker

A definition can have a cardinality and have multiple prevalidators.

Example of some new definitions:

                'd': { //day

                    "validator": "0[1-9]|[12][0-9]|3[01]",

                    "cardinality": 2,

                    "prevalidator": [{ "validator": "[0-3]", "cardinality": 1}]

                },

                'm': { //month

                    "validator": "0[1-9]|1[012]",

                    "cardinality": 2,

                    "prevalidator": [{ "validator": "[01]", "cardinality": 1}]

                },

                'y': { //year

                    "validator": "(19|20)\\d\\d",

                    "cardinality": 4,

                    "prevalidator": [

                        { "validator": "[12]", "cardinality": 1 },

                        { "validator": "(19|20)", "cardinality": 2 },

                        { "validator": "(19|20)\\d", "cardinality": 3 }

                        ]

                }

These allow for a finer date validation then 99/99/9999 which also allows 33/33/3333 for example.

Also extra features like mask-repetitions (greedy and non-gready) are included.  In the examples you will find more about them.


Usage:

Include the js-files

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.inputmask.js" type="text/javascript"></script>

Define your masks:

$(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
});

Extra options:
change the placeholder

$(document).ready(function(){
   $("#date").inputmask("d/m/y",{ "placeholder": "*" });
});

execute a function when the mask is completed

$(document).ready(function(){
   $("#date").inputmask("d/m/y",{ "oncomplete": function(){ alert('inputmask complete'); } });
});

mask repeat function

$(document).ready(function(){
   $("#number").inputmask({ "mask": "9", "repeat": 10 });  // ~ mask "9999999999"
});

mask non-greedy repeat function

$(document).ready(function(){
   $("#number").inputmask({ "mask": "9", "repeat": 10, "greedy": false });  // ~ mask "9" or mask "99" or ... mask "9999999999"
});

get the unmaskedvalue

$(document).ready(function(){
   $("#number").inputmask('unmaskedvalue');
});

set a value and apply mask

$(document).ready(function(){
   $("#number").inputmask('setvalue', 12345); 
});

when the option patch_eval is set to true the same can be done with the traditionnal jquery.val function

$(document).ready(function(){
   $("#number").val(12345); 
});

with the autoUnmaskoption you can change the return of $.fn.val  to unmaskedvalue or the maskedvalue

$(document).ready(function(){
   	$('#<%= tbDate.ClientID%>').inputmask({ "mask": "d/m/y", 'autoUnmask' : true});	//  value: 23/03/1973

	alert($('#<%= tbDate.ClientID%>').val());	// shows 23031973     (autoUnmask: true)
});

add custom definitions

$.extend($.inputmask.defaults.definitions, {
    'f': {
        "validator": "[0-9\(\)\.\+/ ]",
        "cardinality": 1,
        'prevalidator': null
    }
});

set defaults

$.extend($.inputmask.defaults, {
    'autounmask': true
});

optional masks - REMOVED OBSOLETE

$(document).ready(function(){
    $('#test1').inputmask('9999[aaaa]9999');           // 1234abcd1234 or 12341234
    $('#test2').inputmask('[aaaa]9999');               // abcd1234 or 1234
    $('#test3').inputmask('9999[aaaa]');               // 1234 or 1234abcd
});

numeric input direction

$(document).ready(function(){
    $('#test').inputmask('€ 999.999.999,99', { numericInput: true });    //   123456  =>  € ___.__1.234,56
});

remove the inputmask

$(document).ready(function(){
    $('#test').inputmask('remove');
});

escape special mask chars

$(document).ready(function(){
    $("#months").inputmask("m \\months");
});

remove incomplete input on blur - clearIncomplete

$(document).ready(function(){
    $("#ssn").inputmask("999-99-9999",{placeholder:" ", clearIncomplete: true });
});

oncleared option

$(document).ready(function(){
    $("#ssn").inputmask("999-99-9999",{placeholder:" ", oncleared: function(){ alert('Set focus somewhere else ;-)');} });
});

aliases option

First you have to create an alias definition (more examples can be found in jquery.inputmask.extentions.js)

$.extend($.inputmask.defaults.aliases, {
        'date': {
            "mask": "d/m/y"
        }
});

use;
$(document).ready(function(){
   $("#date").inputmask("date");       => equals to    $("#date").inputmask("d/m/y");
});