Change text box to password type

Hello all, I am working on a script that allows an administrative login to manage a website via the backend. What I am doing is leaving the password box as a plain text box so that the admin can see their password as it's typed ( no masking ).

What I want to do is offer a checkbox that when checked, will change the password text box type to password rather than text. Can anyone help me accomplish this? I don't know javascript, but I can read and understand if you can point me in the right direction.

 

Hi,

the whole thing is in 'onclick' event attached to checkbox. If checked, then it changes the type of field called "pass" into password, else back to text...

<form>
    Password: <input type="text" name="pass" />
    Hide password: <input type="checkbox" onclick="pass.type=(this.checked)?'password' :'text'" />
</form>

HTML:

 

Thanks, seems to work like a charm!

 

yes this is the correct way script given

 

er, i would not recommend referencing an element property by 'pass.type'. you should write this through such a call:

add id="pass"

document.getElementById("pass").setAttribute("type", (this.checked) ? "text" : "password");

 

This solution won't work in IE as you can't access the type attribute of input in this browser when the node is attached to the DOM tree.

The best way to implement such input behavior is to create a new input with a different type and replace the current one with it.

<form>
 <input id="mypass" type="text" name="pass" />
<input id="sw" type="checkbox" />
</form>

<script>
function switchType() {	
  var inp = document.createElement('input'),
       mp = document.getElementById('mypass'),
       sw = document.getElementById('sw');  
  inp.type = (sw.checked) ? 'password' : 'text';
  inp.id = mp.id;
  inp.name = mp.name;
  inp.value = mp.value;
  mp.parentNode.replaceChild(inp, mp);
}

document.getElementById('sw').onclick = switchType;
</script>

Code (markup):