Input Mask

Baron Schwartz Aug 10, 2007

General

This script uses unobtrusive JavaScript to implement "input masks." The maximum field length is automatically limited to the length of the mask. The characters that are entered into the fields are constrained, and separators are automatically added. (No actual validation is done. Check our site for validation scripts.)

Notes

Created by: Baron Schwartz
Web Site: http://www.xaprb.com/
Posted: August 10, 2007

Requires the Prototype JavaScript framework, available at the Prototype Web site.

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: html-form-input-mask.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com  */
/*
 * Copyright (C) 2006 Baron Schwartz <baron at xaprb dot com>
 * http://www.xaprb.com/html-input-mask/html-form-input-mask.html
 * This program is free software; you can redistribute it and/or modify it
 * under the terms of the GNU Lesser General Public License as published by the
 * Free Software Foundation, version 2.1.
 *
 * This program is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE.  See the GNU Lesser General Public License for more
 * details.
 *
 * $Id: html-form-input-mask.js,v 1.6 2006-11-03 04:04:29 baron Exp $
 */

/* Set up a global Xaprb object to act as the Xaprb namespace, without colliding
 * with other Xaprb scripts.
 */
if ( typeof(Xaprb) === 'undefined' ) {
   Xaprb = new Object();
}

/* The Xaprb.InputMask object acts as the namespace for input masking
 * functionality.
 */
Xaprb.InputMask = {

   /* Each mask has a format and regex property.  The format consists
    * of spaces and non-spaces.  A space is a placeholder for a value the user
    * enters.  A non-space is a literal character that gets copied to that
    * position in the value.  The regex is used to validate each character, one
    * at a time (it is not applied against the entire value in the form field,
    * just the characters the user enters).
    *
    * The way you name your masks is significant.  If you create a mask called
    * date_us, you cause it to be applied to a form field by a) adding the
    * input_mask class to that form field, which triggers this script to treat
    * it specially, and b) adding the class mask_date_us to the form field,
    * which causes this script to apply the date_us mask to it.
    */
   masks: {
      date_iso: {
         format: '    -  -  ',
         regex:  /\d/
      },
      date_us: {
         format: '  /  /    ',
         regex:  /\d/
      },
      time: {
         format: '  :  :  ',
         regex:  /\d/
      },
      phone: {
         format: '(   )   -    ',
         regex:  /\d/
      },
      ssn: {
         format: '   -  -    ',
         regex:  /\d/
      },
      visa: {
         format: '    -    -    -    ',
         regex:  /\d/
      }
   },

   /* Finds every element with class input_mask and applies masks to them.
    */
   setupElementMasks: function() {
      if ( document.getElementsByClassName ) { // Requires the Prototype library
         document.getElementsByClassName('input_mask').each(function(item) {
            Event.observe(item, 'keypress',
               Xaprb.InputMask.applyMask.bindAsEventListener(item), true);
         });
      }
   },


   /* This is triggered when the key is pressed in the form input.  It is
    * bound to the element, so 'this' is the input element.
    */
   applyMask: function(event) {
      var match = /mask_(\w+)/.exec(this.className);
      if ( match.length == 2 && Xaprb.InputMask.masks[match[1]] ) {
         var mask = Xaprb.InputMask.masks[match[1]];
         var key  = Xaprb.InputMask.getKey(event);

         if ( Xaprb.InputMask.isPrintable(key) ) {
            var ch      = String.fromCharCode(key);
            var str     = this.value + ch;
            var pos     = str.length;
            if ( mask.regex.test(ch) && pos <= mask.format.length ) {
               if ( mask.format.charAt(pos - 1) != ' ' ) {
                  str = this.value + mask.format.charAt(pos - 1) + ch;
               }
               this.value = str;
            }
            Event.stop(event);
         }
      }
   },

   /* Returns true if the key is a printable character.
    */
   isPrintable: function(key) {
      return ( key >= 32 && key < 127 );
   },

   /* Returns the key code associated with the event.
    */
   getKey: function(e) {
      return window.event ? window.event.keyCode
           : e            ? e.which
           :                0;
   }
};

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="html-form-input-mask.js"></script>
<script type="text/javascript" src="prototype.js"></script>

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  Xaprb.InputMask.setupElementMasks();
});

Body

Paste this code into the BODY section of your HTML document


<form action="" method="get">
  <table>
  <tr>
    <td>Date (US format):</td>
    <td><input id="input_date" type="text" class="text input_mask mask_date_us"></td>
  </tr><tr>
    <td>Time:</td>
    <td><input id="input_time" type="text" class="text input_mask mask_time"></td>
  </tr><tr>
    <td>Phone number:</td>
    <td><input id="input_phone" type="text" class="text input_mask mask_phone"></td>
  </tr>
  </table>
</form>

Leave a Response

(12 comments)

I can't seem to get this code to work with the regex for money I've been trying from different sites.[br /][br /]Is there something special I need to do? Here are a few I've tried:[br /][br /]regex: /[0-9]+(,[0-9]{3})*(\.[0-9]{2})?$/[br /]regex: /[1-9][0-9]{0,2}(,[0-9]{3})*(\.[0-9]{2})?[br /]regex: /(((\d{1,3},)+\d{3})|\d+)\.\d{2}/[br /]regex: /^(0|[1-9]\d{0,2}(,?\d{3})*)(\.\d{1,2})?$/

Ken Whittington Nov 20, 2008

thanks, and I have used it for bank account input-mask.

kiokuw Oct 19, 2008

You will need to submit your question to the [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]JavaScript forums[/a].

Lee May 12, 2008

I am having trouble with the header code: The function is not recognized as a function and prototype.js does not exist. I am using Visual Studio 2005 ASP.NET running in IE

Mike Guarino May 8, 2008

Yes, it doesn't work in IE.

Lee Sep 5, 2007

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details