Comment avoir deux champs de mot de passe contrôlés par une case à cocher?

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

  •  11-10-2019
  •  | 
  •  

Question 

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

J'utilise le code ci-dessus sous une forme un peu plus complexe.

J'ai deux champs distincts « mot de passe » sur le formulaire. Avec le code actuel, je peux avoir le premier champ de mot de passe montrent les caractères tels qu'ils sont saisis lorsque la case est cochée.

En outre, le code avertit l'utilisateur si elles sont en tapant avec verrouillage des majuscules activées.

Je voudrais avoir les deux champs de mot de passe présentant le même comportement plutôt que le premier seul champ. Malheureusement, je ne sais pas comment faire pour que cela se produise.

Merci pour l'aide.

EDIT:
Une solution simple pourrait être plus facile à trouver avec le code suivant. Je suis prêt à utiliser un ou l'autre. 

<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>
Était-ce utile?

La solution 5

La plupart des réponses ne fonctionnait pas. Un ou deux, je reste non éprouvée parce qu'ils voulaient dire des changements plus importants à mon code que je voulais. J'ai fini par trouver une autre méthode pour révéler les mots de passe: « Afficher le mot de passe sous forme de texte » contrôle
Je me suis adapté la méthode là pour mon scénario à plusieurs champs de mot de passe: 

<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

Autres conseils

Pourquoi ne pas changer simplement l'attribut type des entrées de mot de passe dans votre fonction unmask()? De cette façon, il sera plus facile pour vous de gérer plus de 1 champ. Après avoir vérifié si vous devez tourner la input en un ou de text un de password, faites ceci: 

// 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;

Je suggère de changer votre approche un peu.

vous pouvez modifier le client sans impact sur le code du serveur. Par exemple, je voudrais essayer d'utiliser 2 boîtes de saisie avec le même nom. Si vous avez déjà une seule boîte visible tandis que l'autre a l'ensemble d'attributs HTML « désactivé », la case visible sera toujours le seul soumis.

De cette façon, votre code côté serveur n'aurait à chercher 1 entrée, sous un même nom.

verrouillent test / fonction? mettre les deux champs à la classe de mot de passe et: 

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
    }
});

Essayez ceci: 

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);
};

Qu'est-ce que cela ne fait faire que votre code fonctionne sur pwd et pwd2 en répétant pour chaque élément dans le new Array('pwd', 'pwd2') tableau.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top