« »

This script uses Prototype library - 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.)

Label: text input, masker, mask, implement, character, validation, input mask

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Free iPage Web Hosting for First Year NOW

If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage. Try iPage for FREE First Year NOW

Code
Files
JavaScript
HTML
Print

prototype.js

Copy All x2

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
<!--
//Created by: Baron Schwartz :: http://www.xaprb.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;
   }
};

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();
});
//-->
</script>

Copy All x2

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

Requires the Prototype JavaScript framework, available at <a href="http://www.prototypejs.org/">the Prototype Web site</a>.

Comment (0)
Write

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
~~Your site~~

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (0)
New

BBCode
HTML
URL
JID

https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools

chatGPTaz
Voice chat comning soon. You could talk to ChatGPT and hear the most intelligent AI speaks very soon

Cool Domains for Sale!

choose.works CreditCard.rip ChatTotal.com CoinHolo.com choose.exchange ZWVQ.com system.money eChainBank.com pornID.net ChainTutor.com this.bid index.services Card.rip ApexBTC.com CTRCoin.com XMQV.com war.money ABP3.com CryptoKD.com YeuNu.com

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

03/11/2008
Baron Schwartz [more]
7,145
0
1
0
0.06 KBytes

JavaScript Text Input Masker

5/5 1 votes / 7,145 previews / 0 comment 03/11/2008 This script uses Prototype library - unobtrusive JavaScript to implemen...JavaScript Text Input Masker - Text Input Masker

phys.rainbow antt thuythu dttxk510 nguyenducthuan24 lebinhit goldtechvietnam chuotcoi[2] ttv1 dreegoo