Change input type="text" to input type="password"

jackl79

02-09-2007, 11:01 AM

I need to change input type="text" to input type="password" via JavaScript

<form id="login" action="#" method="post">
<input id="username-field" type="text" name="username" title="Username" onmousedown="javascript:this.value=''; javascript:this.focus();" value="Username" tabindex="1" />
<input id="password-field" type="text" name="password" title="Password" onmousedown="javascript:this.value=''; javascript:this.type='password'; javascript:this.focus();" value="Password" tabindex="2" />
<input type="submit" name="submit" value="sign in" tabindex="3" />
</form>

This works in Firefox and Safari but not IE So then I tried this code

<script type="text/javascript">
function passit(ip){
var np=ip.cloneNode(true);
np.type='password';
if(np.value!=ip.value)
np.value=ip.value;
ip.parentNode.replaceChild(np,ip);
}
</script>

<form id="login" action="#" method="post">
<input id="username-field" type="text" name="username" title="Username" onmousedown="javascript:this.value=''; javascript:this.focus();" value="Username" tabindex="1" />
<input id="password-field" type="text" name="password" title="Password" onmousedown="javascript:this.value=''; passit(this.form[0]); javascript:this.focus();" value="Password" tabindex="2" />
<input type="submit" name="submit" value="sign in" tabindex="3" />
</form>

This does what I need but turns the username type to password field not the password box

Please can somone help!

neomaximus2k

02-09-2007, 11:13 AM

erm.... question, why would you want to show a text box but as soon as they start typing away it changes to a password box?????

jackl79

02-09-2007, 11:19 AM

I want the Box to say the word "Password" but as you click it and start typing you password is not shown :)

neomaximus2k

02-09-2007, 11:29 AM

ok in that case do something like this....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
function changefield(){
document.getElementById("passwordbox").innerHTML = "<input id=\"password-field\" type=\"password\" name=\"password-field\" title=\"Password\" tabindex=\"2\" />";
document.getElementById("password-field".focus();
}
</script>
</head>

<body>
<div id="passwordbox">
<input id="password-field" type="text" name="password-field" title="Password" onfocus="changefield();" value="Password" tabindex="2" />
</div>
<input type="submit" name="submit" value="sign in" tabindex="3" />

</body>
</html>

I noticed that you had a different ID for each field when compared to the Name, its best to keep them the same.

also what is this part for?
passit(this.form[0]);

jackl79

02-09-2007, 11:35 AM

Not 100% sure
Found that code on another forum
http://www.dynamicdrive.com/forums/showthread.php?p=72456

Kor

02-09-2007, 11:55 AM

IE does not like to change dynamically the type, thus one solution might be to replace entirely the object. Even so, IE does not focus first time the element, as it should, but I guess this would be a minor inconvenience:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="txt/javascript">
<script type="text/javascript">
function replaceT(obj){
var newO=document.createElement('input');
newO.setAttribute('type','password');
newO.setAttribute('name',obj.getAttribute('name'));
obj.parentNode.replaceChild(newO,obj);
newO.focus();
}
</script>
</head>
<form>
<input type="text" name="password" value="Password" onfocus="replaceT(this)">
</form>
</body>
</html>

jackl79

02-09-2007, 01:08 PM

Thanks Kor
It is a shame there is not an easy "perfect" solution

Pyth007

02-09-2007, 11:54 PM

To get IE to focus on the new element, just have a short timeout...

function replaceT(obj){
/* Most of function here */
setTimeout("newO.focus();", 10);
}

FJbrian

02-09-2007, 11:59 PM

can you put one on top of the other with z index/layers?

neomaximus2k

02-10-2007, 12:07 AM

can you put one on top of the other with z index/layers?

Possible, the other alternative is this, use CSS and set the background image to an image that has the word password in it, when the field comes into focus change the background image to a plain one

that way you give the illusion of the word password in the box but it never is

plus you dont need to use long JS code as shown earlier!

I think that is the easiest way of doing it, no messing no fuss a simple class change

FJbrian

02-10-2007, 01:33 AM

Possible, the other alternative is this, use CSS and set the background image to an image that has the word password in it, when the field comes into focus change the background image to a plain one

that way you give the illusion of the word password in the box but it never is

plus you dont need to use long JS code as shown earlier!

I think that is the easiest way of doing it, no messing no fuss a simple class change

good idea

neomaximus2k

02-10-2007, 10:10 AM

good idea

Thanks :) it came to me in a drunken dream lol :thumbsup:

svartalf

04-23-2009, 01:36 PM

The JavaScript solution is a good solution but sometimes creating a entirely new form object can create some problems, I used this solutions instead:

if(obj.getAttribute('type')=='text')
{
obj.setAttribute('type','password');
}else{
obj.setAttribute('type','text');
}
obj.focus();

<input type="text" name="password" value="Password" onclick="replaceT(this);">

Saves already entered text and everything =)

IE does not like to change dynamically the type, thus one solution might be to replace entirely the object. Even so, IE does not focus first time the element, as it should, but I guess this would be a minor inconvenience:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="txt/javascript">
<script type="text/javascript">
function replaceT(obj){
var newO=document.createElement('input');
newO.setAttribute('type','password');
newO.setAttribute('name',obj.getAttribute('name'));
obj.parentNode.replaceChild(newO,obj);
newO.focus();
}
</script>
</head>
<form>
<input type="text" name="password" value="Password" onfocus="replaceT(this)">
</form>
</body>
</html>

impelmedia

02-29-2012, 11:35 AM