Come avere due campi password controllati da una casella di controllo?

StackOverflow https://stackoverflow.com/questions/4491604

  •  11-10-2019
  •  | 
  •  

Domanda 

<form> 
<fieldset> 
Password: <span id="capsalert">CAPS LOCK = on</span><br> 
<input type="password" id="pwd">
<script type="text/javascript">
  document.write(
    '<input type="checkbox" name="masking" onclick="unmask(this.checked)"> ' + 
    'Show the password as I type' 
  ); 
</script> 
<br>
Password2:<br> 
<input type="password" id="pwd2">
</fieldset> 
</form> 
<script type="text/javascript"> 
function chkCaps(e) { 
ev = (e ? e : window.event); 
kc = (ev.which ? ev.which : (ev.keyCode ? ev.keyCode : false)); 
sk = (ev.shiftKey ? ev.shiftKey : (ev.modifiers ? !!(ev.modifiers & 4) : false)); 
if( 
  (kc >= 97 && kc <= 122 && sk) ||
  (kc >= 65 && kc <= 90 && !sk) 
) { 
  document.getElementById('capsalert').style.display = 'inline'; 
} 
else { 
  document.getElementById('capsalert').style.display = 'none'; 
}//end if
}//end function 
function unmask(truefalse) {  
oldElem = document.getElementById('pwd');
elem = document.createElement('input');
elem.setAttribute('type', (truefalse == true ? 'text' : 'password'));
elem.setAttribute('value', document.getElementById('pwd').value);
elem.id = 'pwd';
oldElem.parentNode.replaceChild(elem,oldElem);

document.getElementById('pwd').onkeypress = function(e) { chkCaps(e); }; 
}//end function
document.getElementById('pwd').onkeypress = function(e) { chkCaps(e); }; 
</script>

Sto utilizzando il codice di cui sopra in una forma un po 'più complessa.

Ho due campi separati "password" sulla forma. Con il codice attuale posso avere il primo campo della password mostrano i caratteri che vengono digitati quando la casella è spuntata.

Inoltre, i Notifica di codice che l'utente se ne sta digitando con CAPS abilitati Lock.

Mi piacerebbe avere entrambi i campi password che presentano lo stesso comportamento, piuttosto che solo il primo campo. Purtroppo, non so come fare che questo accada.

Grazie per l'aiuto.

EDIT:
Una soluzione semplice potrebbe essere più facile da trovare con il seguente codice. Sono disposto a utilizzare uno dei due. 

<script>
function changeType()
{
    document.myform.pass.type=(document.myform.option.value=(document.myform.option.value==1)?'-1':'1')=='1'?'password':'text';
}
</script>

<body>
<form name="myform">
   <input type="password" name="pass" />
   <input type="password" name="pass2" />
   <input type="checkbox" name="option" value='1' onchange="changeType()" />
</form>
</body>
È stato utile?

Soluzione 5

La maggior parte delle risposte non ha funzionato. Uno o due ho lasciato intentato perché hanno significato maggiori modifiche al mio codice di quanto avrei voluto. Ho finito per trovare ancora un altro metodo per rivelare le password: "Mostra password come testo" controllo
Ho adattato il metodo lì al mio multipla scenario campi password: 

<input type="checkbox" onchange="document.getElementById('gpwd').type = this.checked ? 'text' : 'password'; document.getElementById('pwd1').type = this.checked ? 'text' : 'password'; document.getElementById('pwd2').type = this.checked ? 'text' : 'password'"> Reveal passwords

Altri suggerimenti

Perché non basta cambiare l'attributo type degli ingressi password nel tuo funzione unmask()? In questo modo sarà più facile per voi per gestire più di 1 campo. Dopo aver controllato se è necessario trasformare il input in un uno o un text password uno, fare questo: 

// Suppose 'new_type' is either 'text' or 'password'
// and that 'pwd' and 'pwd2' are the id attributes for
// both of your password fields
document.getElementById('pwd').type = new_type;
document.getElementById('pwd2').type = new_type;

Suggerisco di cambiare il vostro approccio un po '.

Si potrebbe modificare il client senza alcun impatto per il codice del server. Ad esempio, vorrei provare a utilizzare 2 caselle di input con lo stesso nome. Se mai avere una scatola visibile mentre l'altro ha il 'disattivato' insieme attributo HTML, la casella visibile sarà sempre l'unica presentata.

In questo modo, il codice lato server avrebbe solo cercare 1 ingresso, sotto un unico nome.

caps

bloccare test / funzione? impostare entrambi i campi di classe di password e: 

jQuery('.password').caps(function(caps){
    if(jQuery.browser.safari) return; // Safari already indicates caps lock
    // "this" is current element
    if(caps){
        alert('Your caps lock is on!');
    }else{
        // no caps lock on
    }
});

Prova questo: 

function chkCaps(e) {
    ev = (e ? e : window.event);
    kc = (ev.which ? ev.which : (ev.keyCode ? ev.keyCode : false));
    sk = (ev.shiftKey ? ev.shiftKey : (ev.modifiers ? !! (ev.modifiers & 4) : false));
    if ((kc >= 97 && kc <= 122 && sk) || (kc >= 65 && kc <= 90 && !sk)) {
        document.getElementById('capsalert').style.display = 'inline';
    } else {
        document.getElementById('capsalert').style.display = 'none';
    }
    //end if 
}
//end function 

function unmask(truefalse) {
    for (var f in new Array('pwd', 'pwd2')) {
        oldElem = document.getElementById(f);
        elem = document.createElement('input');
        elem.setAttribute('type', (truefalse == true ? 'text' : 'password'));
        elem.setAttribute('value', document.getElementById(f).value);
        elem.id = f;
        oldElem.parentNode.replaceChild(elem, oldElem);
        document.getElementById(f).onkeypress = function (e) {
            chkCaps(e);
        };
    }
}
//end function
document.getElementById('pwd').onkeypress = function (e) {
    chkCaps(e);
};
document.getElementById('pwd2').onkeypress = function (e) {
    chkCaps(e);
};

Quello che fa è renderlo così il vostro codice funziona su pwd e pwd2 ripetendolo per ogni elemento della new Array('pwd', 'pwd2') matrice.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top