A Prototype port of Fabio Zendhi Nagao's iMask (which is based on mootools)
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is even with greenlaw110:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
README

README

This project provides a prototype porting of "Fabio Zendhi Nagao's":http://zend.lojcomm.com.br "iMask":http://zendold.lojcomm.com.br/imask javascript. Most features of iMask remained in pMask, with the following changes:

* default targetClass name changed from "iMask" to "p-mask"
* add an new global option: errorClass, which is set to "p-mask-error" by default
* while user type bad input, the underline input box will be added an new css class specified by errorClass option, for 1 second by default and then removed. This is to provide a default visual feedback to user that the input is not acceptable
* add new instance option: stripMaskOnSubmit. The rational to this is usually we want to display the masked value in the input even the focus has left to other input. But we want to server get the cleaned data, so it comes stripMaskOnSubmit option indicate the pMask strip the mask from the input value while the form get submitted. This is automatically achieved by observing submit eventt of the form of the input element.
* Enter key will not trigger form submit in pMask while it will in iMask
* Enable minus for number type masked input, press "-" will cause the value of the input be multiplied by "-1"
* Dot "." is now a valid number character, but typing "." will do nothing as it is defined by the mask. The only reason to put the "." in the valid character list is it will not be stripped out as a part of mask.
* Provide a default number format options {groupSymbol: ',', groupDigits: 3, decSymbol: '.',decDigits: 2,stripMask: false,stripMaskOnSubmit: true}. You just need to override the part that is different from the default value, e.g. "decDigits: 0"
* Support currency symbol for number type. Just declare option: "currencySymbol: $" to get it

*Dependencies*
This script require prototype-1.6.1 to work properly. In addition, there is an extension to prototype-1.6.1 to help change the keyCode to key, which is provided in prototype-event-extensions.js file. Please make sure you include that file also in your html document.

*Sample Code*
<script type="text/javascript" src="/javascript/prototype.js"></script>
<script type="text/javascript" src="/javascript/prototype-event-extensions.js"></script>
<script type="text/javascript" src="/javascript/pmask.js"></script>
<form onsubmit="return false;" class="clearfix">
  <div>
    <label>ID:</label>
    <input class="p-mask" id="my_id" name="myName" type="text" value="15357595X"
               alt="{type:'fixed', mask:'[99.999.999-x]',stripMask:false,stripMaskOnSubmit:true}" />
  </div>
  <div>
    <label>Phone:</label>
    <input class="p-mask" id="my_phone" name="myPhone" type="text" value="116969"
               alt="{type:'fixed', mask:'(99) 9999-9999',stripMask:false,stripMaskOnSubmit:false}" />
  </div>
  <div>
    <label>Money:</label>
    <input class="p-mask" id="my_money" name="myMoney" type="text" value="1238" style="text-align:right"
               alt="{type:'number',currencySymbol:'$',stripMask:false}" />
  </div>
  <div><input type="submit" value="submit" title="click to check striped value in the inputs"/>
</form>
<script type="text/javascript">new pMask();</script>