/***** INTRO *******/
This document aims to provide basic help to implement iMask in your web application. If you have further questions, please visit the following websites:
- https://sourceforge.net/projects/imask/
- http://zendold.lojcomm.com.br/imask/
/***** Files *****/
imask-lib-min.js --> compressed version of the library, to use on your production environement.
imask-lib.js --> uncompressed version of the library, for debugging or modifying iMask.
imask-init.js --> example initialisation file. Use as is or add the code to your own initialisation file.
/***** Basic Implementation *******/
First of all, iMask is built over MooTools v1.4, so get MooTools at http://mootools.net/download
In your HTML, include the scripts in the head of your document as follow:
<head>
<!--// codes here //-->
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/imask-lib-min.js"></script>
<script type="text/javascript" src="js/imask-init.js"></script>
<!--// and here //-->
</head>
Then to enable a mask for a field, just add the properties class="iMask" and alt="{options}".
{options} is a string representing an object in JavaScript Object Notation (aka. JSON). Here is the list of valid properties:
type : (string) fixed || number. The mask type affects what formatting options available and .
stripMask : (boolean) true || false. This controls whether the mask is removed when the user is done editing the field.
When the type is set to "fixed", define the input mask with the "mask option"
mask : (string) your mask using [ 9, a, x ] notation. "9" for any number, "a" for any letter, and "x" for any alphanumeric character.
When the type is set to "number", the following options are used to define the mask. Note that is it currently not possible to strip the group symbol and leave the decimal symbol.
groupSymbol: (string)
groupDigits: (integer)
decSymbol: (string)
decDigits: (integer)
/***** EXAMPLE *******/
<form action="your_page.php">
<table>
<tr>
<td><label>ID:</label></td>
<td><input class="iMask" id="myId" name="myId" type="text"
value="15357595X"
alt="{
type:'fixed',
mask:'[99.999.999-x]',
stripMask: true
}"
/></td>
</tr>
<tr>
<td><label>Phone:</label></td>
<td><input class="iMask" id="myPhone" name="myPhone" type="text"
value="116969"
alt="{
type:'fixed',
mask:'(99) 9999-9999',
stripMask: true
}"
/></td>
</tr>
<tr>
<td><label>Code:</label></td>
<td><input class="iMask" id="myCode" name="myCode" type="text"
value="76543-210"
alt="{
type:'fixed',
mask:'99999-999',
stripMask: false
}"
/></td>
</tr>
<tr>
<td><label>Money:</label></td>
<td><input class="iMask" id="myMoney" name="myMoney" type="text"
value="0.09"
alt="{
type:'number',
groupSymbol: ',',
groupDigits: 3,
decSymbol: '.',
decDigits: 2,
stripMask: false
}"
/></td>
</tr>
</table>
</form>
Download Latest Version
iMask 1.1 for Mootools 1.4.zip (7.6 kB)
