Comments on: How to create input masks in HTML

By: bisi2poche

bisi2poche — Fri, 22 Aug 2008 09:27:57 +0000

Thank’s a lot for this usefull script.

I notice that setupElementMasks should use : $$(’.input_mask’)
instead of document.getElementsByClassName
(I don’t know why, but getElementsByClassName give me an error with prototype 1.6.0.2)

By: Mike

Mike — Thu, 12 Jun 2008 15:07:06 +0000

To enable the keypad in IE7.0 replace the applyMask function with the code below.

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);

// correction for numeric keypad
if (key >= 96 && key

By: Xaprb

Xaprb — Tue, 01 Apr 2008 14:11:09 +0000

Hi all,

I’m sorry but I don’t have time or need to maintain this or help people with it. I would love it if someone would take on the task of maintaining it. Please leave a comment with the URL of the new home for it, if you decide to maintain and improve it.

By: Muhammad Asif

Muhammad Asif — Tue, 01 Apr 2008 09:24:31 +0000

Can I place a mask inside the text field pre populated. This will give a clue to the end user entering the date. Thanks. I am unable to do so till now.

By: Rhett135

Rhett135 — Tue, 04 Mar 2008 14:41:03 +0000

Very nice, helpful!
Is there a smaller version of prototype.js available, with only the necessary code for this mask?

By: Jimmy6

Jimmy6 — Mon, 07 Jan 2008 16:33:06 +0000

it does not work in IE7. “/.;’,” all there symbol can be inserted

By: Jay Nair

Jay Nair — Thu, 02 Aug 2007 12:55:12 +0000

thank u so much for this, it really helped me a lot. can the delete key and the numbers on the num pad be activated? if yes, please let me know. thanx once again.

By: Xaprb

Xaprb — Thu, 14 Jun 2007 01:13:43 +0000

It’s LGPL. I don’t want to license it any more liberally than that, though of course you are free to inspect the source and design your own implementation of the same thing.

By: Oliver

Oliver — Wed, 13 Jun 2007 23:18:27 +0000

You have this licensed under the GPL. I’d like to use this code in on of my web application products. Will you give your permission for this use?

By: Werner Cloete

Werner Cloete — Tue, 08 May 2007 14:03:17 +0000

Good day, everyone…

I changed the input masks’ place holders to enable us to use spaces in our masks…

Here is a sample of the new masks:

		date:
		{
			format:	'§§/§§/§§§§',	// Werner Cloete - 02/05/2007 - Make use of a new "§" mask place holder
			regex:	/d/
		},
		phone:
		{
			format:	'§§§ §§§-§§§§',	// Werner Cloete - 02/05/2007 - Make use of a new "§" mask place holder
			regex:	/d/
		}

The “§” character is created with [Alt]+21…

I also updated the code to display the mask’s next set character as you type…so, for example, if you’re using the date mask, and you have already typed “12″, the “/” will immediately appear…

Here is the updated code:

/*					if ( mask.format.charAt(pos - 1) != ' ' ) */				// Werner Cloete - 02/05/2007 - Commented out the code
					if ( mask.format.charAt(pos) != '§' )						// Werner Cloete - 02/05/2007 - Changed the code to use the new "§" mask place holder
					{
/*						str = this.value + mask.format.charAt(pos - 1) + ch; */	// Werner Cloete - 02/05/2007 - Commented out the code
						str = this.value + ch + mask.format.charAt(pos);		// Werner Cloete - 02/05/2007 - Changed the order in which the strings are concatenated
					}

I hope that this will prove useful…

Yours sincerely

Werner