iMask (Mootools)

by rjurd

HTML

<h1>-------------------------------------</h1>

  <form action="scripts/process.php" method="post" name="frm" id="frm">
  RA #: <input type="text" name="raNum" id="raNum" size="6" maxlength="6"><br>    
  Date: <input type="text" name="raDate" id="raDate" size="10" maxlength="10"><br>
  Original SO#: <input type="text" name="origSoNum" size="8" maxlength="8"><br>
  Sales Rep's Initials: <input type="text" name="repInitials" size="2" maxlength="2"><br>
  Customer Company Name: <input type="text" name="custCompName" size="30" maxlength="30"><br>
  Customer Contact Name: <input type="text" name="custContactName" size="30" maxlength="30"><br>
  Customer Phone Number: <input class="iMask" type="text" name="custPhoneNum" alt="{type:'fixed',mask:'999-999-9999',stripMask: false}">
  <br>
  <table border="1" id="itemsForReturn">
    <tr>
      <th>Row</th>
      <th>Qty</th>
      <th>Item Number</th>
      <th>Item Description</th>
      <th>Item<br>Cost</th>
      <th>Sales<br>Price</th>
      <th>Total</th>
    </tr>
    <tr>
      <td>1</td>
      <td><input type="text" name="itemQty1" id="itemQty1" size="5" maxlength="5" onFocus="startCalc();" onBlur="stopCalc();"></td>
      <td><input type="text" name="itemNum1" id="itemNum1" size="20" maxlength="20"></td>
      <td><input type="text" name="itemDesc1" id="itemDesc1" size="40" maxlength="40"></td>
      <td><input class="iMask" type="text" name="itemCost1" id="itemCost1" size="12" maxlength="12" alt="{type:'number',decSymbol: '.',decDigits: 2,stripMask: false}"></td>
      <td><input class="iMask" type="text" name="salesPrice1" id="salesPrice1" size="12" maxlength="12" alt="{type:'number',decSymbol: '.',decDigits: 2,stripMask: false}" onFocus="startCalc();" onBlur="stopCalc();"></td>
      <td><input class="iMask" type="text" name="salesTotal1" id="salesTotal1" size="12" maxlength="12" alt="{type:'number',decSymbol: '.',decDigits: 2,stripMask: false}"></td>
    </tr>
  </table>
  <input type="hidden" name="r" id="r"...

JavaScript

/* ************************************************************************************* *\
 * The MIT License
 * Copyright (c) 2007 Fabio Zendhi Nagao - http://zend.lojcomm.com.br
 * 
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this
 * software and associated documentation files (the "Software"), to deal in the Software
 * without restriction, including without limitation the rights to use, copy, modify,
 * merge, publish, distribute, sublicense, and/or sell copies of the Software, and to
 * permit persons to whom the Software is furnished to do so, subject to the following
 * conditions:
 * 
 * The above copyright notice and this permission notice shall be included in all copies
 * or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
 * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
 * PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
 * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
 * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 * 
\* ************************************************************************************* */
var iMask = new Class({
    options: {
        targetClass: ".iMask",
        maskEmptyChr: '_',

        validNumbers: "1234567890",
        validAlphas: "abcdefghijklmnopqrstuvwxyz",
        validAlphaNums: "abcdefghijklmnopqrstuvwxyz1234567890",

        onFocus: Class.empty,
        onBlur: Class.empty,
        onValid: Class.empty,
        onInvalid: Class.empty,
        onKeyDown: Class.empty
    },

    initialize: function(options) {
        this.setOptions(options);

        var fields = $$(this.options.targetClass);
        fields.each(function(obj, i) {
            obj.options = JSON.decode(obj.alt);
           ...