Skip to content

greenlaw110/pMask

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 

Repository files navigation

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>

About

A protoype porting of Fabio Zendhi Nagao's iMask (which is based on mootools)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published