Mask a text field

gonzilla · Jul 29, 2003

Hi,

How do you similate a password field in a input text box field without using type="password"? For instance, what if I wanted to maske it with a "-" instead of a "*"?

I have it kind of working but I don't know if this is the best way to do it or if there was a more robust way.

Code:

function toDash (evt) {
   var keyCode = evt.keyCode ? evt.keyCode : evt.charCode ? evt.charCode : evt.which ? evt.which : void 0;
   if (keyCode) {
       window.event.keyCode = &quot;-&quot;.charCodeAt();
       return true;
    }
	return false;
}

Thanks.

-Tyler

mwolf00 · Jul 29, 2003

Hmmm - looks pretty good but you need to store the actual text typed into a hidden box and allow for backspaces/deletes... what a pain. Why not just use type="password"?

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook

gonzilla · Jul 29, 2003

Thanks.

I wish I could use type="password" but I can't use that facility with the software product we use - basically it doesn't support that type of input box so we have to mimic it somehow.

So, I know I can store the value in a hidden box and to handle backspaces (I think this already handles them) but what exactly do you mean by deletes? Are there a set of keycodes I should just not accept?

Thanks.

-Tyler

LFI · Jul 29, 2003

Tyler,

This works in IE. You can adjust it to meet your needs. I probably got a little over-zealous with the regular expressions because I am not an expert on using them, but see if this will work for you:

Code:

<HTML>
<HEAD>
<SCRIPT>
var pwd = &quot;&quot;;
var pattern1 = /^[A-Z,a-z]+/; //checks for starting with at least one letter
var pattern2 = /^[0-9]+/; //checks for starting with at least one number

function fakeout(field, evt)
{
 var x = event.keyCode;
 var y = unescape(&quot;%&quot;+x.toString(16)); //makes code a hex and puts '%' in front
 if(pattern1.test(y) || pattern2.test(y))
 {
  if(pattern1.test(y))
  {
   if(!event.shiftKey)
   {
    x += 32; //lower-case have unicode 32 higher than upper-case equivalents
    y = unescape(&quot;%&quot;+x.toString(16));
   }
  }
  else //a number
  {
   if(event.shiftKey) //don't allow special characters (!@#$%^&...)
    return false;
  }

  pwd += y;
 }
 else if(x == 8) //backspace
 {
  if(pwd.length > 0) 
   pwd = pwd.substring(0, pwd.length-1);
 }
 else if(x == 9) //tab
 {
  reveal.focus();
  return false;
 }
 else
  return false;

 //if function has gotten this far...
 password.value = pwd;
 fake.value = &quot;&quot;;
 for(i=0; i<pwd.length; i++)
 {
  fake.value += &quot;*&quot;;
 }
 
 return false;
}

function showPassword()
{
 alert(password.value);
}
</SCRIPT>
</head>
<body>
<input type=text onkeydown=&quot;return fakeout()&quot; onkeyup=&quot;return false&quot; 

name=fake>
<input type=hidden name=password>
<input name=reveal type=button onclick=showPassword() value='Show 

Password'>
</BODY>
</HTML>

Good luck.

--Dave

gonzilla · Jul 29, 2003

Thanks for all of the help. Dave your solution was just about what I was looking for.

-Tyler

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Mask a text field

gonzilla

Programmer

mwolf00

Programmer

gonzilla

Programmer

LFI

Programmer

gonzilla

Programmer

Similar threads

Part and Inventory Search

Sponsor