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

Code:

<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

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....

Code:

<!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/s...ad.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:

Code:

<!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...

Code:

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

Quote:

Originally Posted by FJbrian

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

Quote:

Originally Posted by neomaximus2k

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

Quote:

Originally Posted by FJbrian

good idea

Thanks

it came to me in a drunken dream lol

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:

Code:

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

Code:

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

Saves already entered text and everything =)

Quote:

Originally Posted by Kor

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:

Code:

<!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

Quote:

Originally Posted by Kor

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:

Code:

<!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>

That's exactly what I needed thank you!