iMask Code
Brought to you by:
guiweb
Menu
▾
▴
Tree [r1] / History
| 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>
