Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Location
    London
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

  • #2
    Regular Coder
    Join Date
    Jan 2007
    Posts
    213
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?????
    Matthew Bagley
    Paramiliar Design Studios
    Website Design | Website Development | Search Engine Optimisation (SEO)

  • #3
    New to the CF scene
    Join Date
    Feb 2007
    Location
    London
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I want the Box to say the word "Password" but as you click it and start typing you password is not shown

  • #4
    Regular Coder
    Join Date
    Jan 2007
    Posts
    213
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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]);
    Matthew Bagley
    Paramiliar Design Studios
    Website Design | Website Development | Search Engine Optimisation (SEO)

  • #5
    New to the CF scene
    Join Date
    Feb 2007
    Location
    London
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Not 100% sure
    Found that code on another forum
    http://www.dynamicdrive.com/forums/s...ad.php?p=72456

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    New to the CF scene
    Join Date
    Feb 2007
    Location
    London
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Kor
    It is a shame there is not an easy "perfect" solution

  • #8
    Regular Coder
    Join Date
    Sep 2005
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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);
    }
    If you want answers, write a smart question.

    Yes, someone probably does know how...

    Oh, and if you want to learn, STFW!

  • #9
    Regular Coder
    Join Date
    Jun 2002
    Location
    Adirondacks
    Posts
    516
    Thanks
    4
    Thanked 4 Times in 4 Posts
    can you put one on top of the other with z index/layers?

  • #10
    Regular Coder
    Join Date
    Jan 2007
    Posts
    213
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by FJbrian View Post
    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
    Matthew Bagley
    Paramiliar Design Studios
    Website Design | Website Development | Search Engine Optimisation (SEO)

  • #11
    Regular Coder
    Join Date
    Jun 2002
    Location
    Adirondacks
    Posts
    516
    Thanks
    4
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by neomaximus2k View Post
    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

  • #12
    Regular Coder
    Join Date
    Jan 2007
    Posts
    213
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by FJbrian View Post
    good idea
    Thanks it came to me in a drunken dream lol
    Matthew Bagley
    Paramiliar Design Studios
    Website Design | Website Development | Search Engine Optimisation (SEO)

  • #13
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Macintosh

    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 View Post
    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>

  • #14
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Kor View Post
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •