Visualizza password

[dam7]

Stiamo costruendo un questionario con accesso tramite password.
La password è di 10 caratteri alfanumerici (per vari motivi non possiamo farne meno) che verrà consegnata su carta (non è possibile raccogliere le mail di tutti gli utenti).

Lo scopo è avere:

- campo password (classico con pallini)
- link "visualizza password" (cliccando mostra i caratteri nel campo password)

così in caso di difficoltà l'utente può inserire la password senza rischio di errori.

Ho provato a fare delle ricerche anche nel mondo css ma senza risultati.
Se qualcuno può aiutarmi, grazie mille!

[ilgiovo]

<script language="javascript">
    function vai() {
        if (document.getElementById("pwd_chiaro").style.display == "none") {
            document.getElementById("pwd_chiaro").value = document.getElementById("pwd").value
            document.getElementById("pwd_chiaro").style.display = "inline"
            document.getElementById("pwd").style.display = "none"
        }
        else {
            document.getElementById("pwd").value = document.getElementById("pwd_chiaro").value
            document.getElementById("pwd_chiaro").style.display = "none"
            document.getElementById("pwd").style.display = "inline"
        }
    }

</script>


<input type="password" id="pwd" name="passwd" style="display: inline;"/>
<input type="text" id="pwd_chiaro" name="passwd" style="display: none;"/>
click

farlo con un solo input cambiandogli il type non so se sia possibile

[dam7]

Grazie della risposta!
Avevo inviato il quesito anche ad un amico (Bik) che mi ha dato il codice che soddisfa perfettamente la mia richiesta (con il cambio di "type").

Posto il codice che può tornare utile:

<script language="Javascript">
function vediPwd() {
  var newObject = document.createElement('input');
  var oldObject = document.getElementById('thePwd');
  if(oldObject.type == "password"){
	  newObject.type = "text";
	  document.getElementById('linkPwd').innerHTML = "<a href=\"javascript:void(0);\" onclick=\"vediPwd()\">Nascondi</a>";
  }
  else{
	  newObject.type = "password";
	  document.getElementById('linkPwd').innerHTML = "<a href=\"javascript:void(0);\" onclick=\"vediPwd()\">Mostra</a>";
  } 
  if(oldObject.size) newObject.size = oldObject.size;
  if(oldObject.value) newObject.value = oldObject.value;
  if(oldObject.name) newObject.name = oldObject.name;
  if(oldObject.id) newObject.id = oldObject.id;
  if(oldObject.className) newObject.className = oldObject.className;
  oldObject.parentNode.replaceChild(newObject,oldObject);
  return newObject;
}
</script>

<input name="login" id="thePwd" type="password" size="30" maxlength="250"/>




<div id="linkPwd">Mostra</div>