jQuery Mask Plug-in

Mask Plug-in is a jQuery plug-in for entering data in certain format into input text field. It allows controlling correct entering of data and handling the exceptions of the entered data like phone number, date, etc. and data with fixed length.One interesting feature of mask plug-in is a restriction of reaching the unfilled part of an input.

To start working with mask plug-in you simply need to invoke maskPlugin on your input jQuery selector, pass mask string as a first argument and parameters as a second one. Please see a common approach of how to start working with mask plug-in below:

$('#input selector').maskPlugin(mask, [parameters]);

Example:

$('#phone').maskPlugin('(999) 999-9999');
$('#date').maskPlugin('99/99/99');

Each symbol of mask string is compared to definitions object keys. Characters in this object are treated as a regular expression rules. These characters will appear as a placeholder (by default _) in the input. Other symbols are handled like accessory mask pattern. By default, mask definitions object has following appearance:

definitions: {
    "9": "[0-9]",
    "a": "[A-Za-z]",
    "*": "[A-Za-z0-9]"
}

You can simply change default behavior or associate any new symbol with another regular expression via changing $.maskPlugin.definitions object.

Example:

$.maskPlugin.definitions object['*'] = "[A-Za-z0-9]"

Parameters

clearIncomplete:

By default, mask plug-in doesn’t clean up the input when user leaves uncompleted text field. To enable this logic, you should set {clearIncomplete: true} as a parameter during mask plug-in initialization in the second argument.

Example:

$('#date').maskPlugin('99/99/99', {
	clearIncomplete: true
});

allwaysMask:

allwaysMask allows to make input field masked permanently despite of focus state, starting from plug-in initialization.

Example:

$('#date').maskPlugin('99/99/99', {
	allwaysMask: true
});

placeholder:

placeholder parameter allows to change default placeholder '_' to a custom one. You should set {placeholder: 'yourPlaceholder'} in mask parameters. Please note placeholder must contain only one symbol.

Example:

$('#date').maskPlugin('99/99/99', {
	placeholder: '*'
});

unmaskedPosition:

unmaskedPosition defines a number of required masked symbols/characters. Default value is false which means that all masked characters are mandatory.

Example:

$('#zip-code').maskPlugin('99999-9999', {
	clearIncomplete: true,
	unmaskedPosition: 5
});

Methods

After mask plug-in initialization, there are stored a few methods in data attribute ‘maskPlugin’. You can get them by calling:

$('#input-date').data('maskPlugin');

Please see the description of methods below:

destroy:

Method destroy removes mask object and unbinds all mask listeners from input field. Custom event listeners will not be affected by calling destroy.

Example:

$('#input-date').maskPlugin('99/99/99');
$('#input-date').data('maskPlugin').destroy();

reset:

Method reset allows to re-initialize mask plug-in on existing input, you can simply invoke this method with new parameters to have new mask applied. Please note that invoking maskPlugin constructor on already masked input is the same as calling reset method.

Example:

$('#input-date').maskPlugin('99/99/99');
$('#input-date').data('maskPlugin').reset('99\99\99');

In fact, invoking maskPlugin constructor on already masked input is the same as reset function calling.