CodingForums.com - Change input type="text" to input type="password"

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Change input type="text" to input type="password" (http://www.codingforums.com/showthread.php?t=107073)

jackl79

02-09-2007 11:01 AM

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

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 (Post 532640)

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 (Post 532648)

good idea

neomaximus2k

02-10-2007 10:10 AM

Quote:

Originally Posted by FJbrian (Post 532666)

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:

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 (Post 532373)

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 (Post 532373)

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

All times are GMT +1. The time now is 08:22 AM.