Menu ▾ ▴

Tree [r1] /
 History

HTTPS svn://
HTTPS access

File Date Author Commit
 README.txt 2011-04-28 guiweb [r1]
 iMask-full.js 2011-04-28 guiweb [r1]
 iMask-init.js 2011-04-28 guiweb [r1]

Read Me

/***** 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/



/***** Basic Implementation *******/

First of all, iMask is built over MooTools v1.3, so get MooTools at http://mootools.net

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-full.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.
mask : (string) your mask using [ 9, a, x ] notation.
stripMask : (boolean) true || false.




/***** EXAMPLES *******/


<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>