Javascript input masks

**pro_ceed1** · 08-06-2012 07:51 AM

Hey,

is there any good solution to implement masks on an input-Element to format currencies, telephone numbers and so forth ?

I've found that link so far (*click*), but those either don't work anyway or they don't meet my requirements...

can anyone help me?

**vwphillips** · 08-06-2012 08:44 AM

http://www.vicsjavascripts.org.uk/Fo...rmatNumber.htm

**pro_ceed1** · 08-06-2012 08:55 AM

thanks for your immediate reply

is there any chance to make more complex masks like "N" for alphanumeric values, "X" for all ascii characters and so forth with your script?

**pro_ceed1** · 08-07-2012 06:13 AM

does anyone of you have another suggestion to solve my problem?

**vwphillips** · 08-07-2012 06:20 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title></title>
<script language="JavaScript" type="text/javascript" >
<!--
// Format by Array (07-August-2012)
// by Vic Phillips http://www.vicsjavascripts.org.uk

var S1='ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var S2='0123456789';

function zxcFormatByArray(obj,ary){
 if (typeof(obj)=='string'){
  obj=document.getElementById(obj);
 }
 var v=obj.value.split(''),rtn='',z0=0;
 for (var z0=0;z0<Math.min(v.length,ary.length);z0++){
  if (ary[z0].indexOf(v[z0])>=0){
   rtn+=v[z0];
  }
  else {
   break;
  }
 }
 obj.value=rtn;
 obj.style.color=ary.length!=rtn.length?'blue':'black';
 return ary.length==rtn.length;
}


//-->
</script><span style="font-Size:12px;" > Format 'AA(N)' </span><br>
</head>

<body>
<input name="" size="15" value="" style="color:gray;" onkeyup="zxcFormatByArray(this,[S1,S1,'(',S2,')']);" ><br>

</body>

</html>

**bionoid** · 08-07-2012 07:39 AM

Did this just for fun, so it's probably not perfect:

Code:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Javascript input masks</title>

		<script type="text/javascript">

			function format(element, mask)
			{
				var
					text = '',
					data = element.value,
					c, m, i, x;

				for (i = 0, x = 1; x && i < mask.length; ++i) {

					c = data.charAt(i);
					m = mask.charAt(i);

					switch (mask.charAt(i)) {
						case '#' : if (/\d/.test(c)) {text += c;} else {x = 0;} break;
						case 'A' : if (/[a-z]/i.test(c)) {text += c;} else {x = 0;} break;
						case 'N' : if (/[a-z0-9]/i.test(c)) {text += c;} else {x = 0;} break;
						case 'X' : text += c; break;
						default  : text += m; break;
					}
				}
				element.value = text;
			}

		</script>

	</head>
	<body>

		<div><input type="text" onkeyup="format(this, '## (NN) #X# #### done!');" /> ## (NN) #X# #### done!</div>
		<div><input type="text" onkeyup="format(this, '##/##/####');" /> ##/##/####</div>
		<div><input type="text" onkeyup="format(this, 'AAA-###-AAA-###');" /> AAA-###-AAA-###</div>

	</body>
</html>

**pro_ceed1** · 08-07-2012 07:51 AM

thanks, guys you helped me a lot!!

which of the two solutions is more efficent in your opinion?

**bionoid** · 08-07-2012 08:17 AM

Just use what you feel comfortable with.
Javascript isn't the worlds most optimized language to begin with, but you're not exactly processing vast amounts of data anyway.

**pro_ceed1** · 08-07-2012 08:22 AM

Originally Posted by bionoid

Just use what you feel comfortable with.
Javascript isn't the worlds most optimized language to begin with, but you're not exactly processing vast amounts of data anyway.

I've used your version and adopted it a little bit - the only thing that's missing for a perfect solution would be the handling if the user deletes something - have you thought about that as well?

**bionoid** · 08-07-2012 08:27 AM

I only really thought about if the user uses backspace, right now the formatter would put any non-evaluated character back, but in regards to the user deleting something in the middle I haven't.

Something for a rainy day

Thread: Javascript input masks

Thread Tools

Display

Javascript input masks

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions