Wie zwei Passwort-Felder durch ein Kontrollkästchen gesteuert haben?

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

  •  11-10-2019
  •  | 
  •  

Frage 

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

Ich bin mit dem obigen Code in einer etwas komplexeren Form.

Ich habe zwei getrennte „Passwort“ Felder im Formular aus. Mit dem aktuellen Code kann ich das erste Passwort-Feld die Zeichen zeigen müssen, wie sie eingegeben werden, wenn das Kontrollkästchen aktiviert ist.

Auch die Code benachrichtigt den Benutzer, wenn sie mit CAPS Sperre eingeben aktiviert.

Ich möchte beide Passwortfelder haben nur das gleiche Verhalten, anstatt das erste Feld zeigt. Leider weiß ich nicht, wie das passieren zu machen.

Danke für die Hilfe.

EDIT:
Eine einfache Lösung könnte einfacher sein, mit dem folgenden Code zu finden. Ich bin bereit, entweder eine verwenden. 

<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>
War es hilfreich?

Lösung 5

Most of the answers didn't work. One or two I left untried because they meant greater changes to my code than I wanted. I ended up finding yet another method to reveal the passwords: "Show password as text" control
I adapted the method there to my multiple password fields scenario:

<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

Andere Tipps

Warum gehst du nicht einfach die type ändern Attribut der Passworteingaben in Ihrer unmask() Funktion? Auf diese Weise es einfacher für Sie mehr als 1 Feld zu verwalten. Nach der Überprüfung, ob Sie das input in eine text einer oder password zu verwandeln haben, dies zu tun: 

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

Ich schlage vor, Ihren Ansatz ein wenig zu verändern.

Sie können den Client ohne Auswirkungen auf den Server-Code ändern. Zum Beispiel würde ich mit zwei Eingabefeldern mit dem gleichen Namen versuchen. Wenn Sie jemals eine sichtbare Box haben, während die andere die ‚behindert‘ HTML-Attribut gesetzt hat, wird die sichtbare Box immer die einzige eingereicht.

Auf diese Weise Ihr serverseitigen Code würde nur für 1 Eingang zu suchen hat, unter einem einzigen Namen.

Caps Lock Test / Funktion? setzt beiden Felder Klasse von Passwort und: 

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

Versuchen Sie diese: 

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

Was dies tut, ist es so, Ihr Code funktioniert auf pwd und pwd2 indem sie sich für jedes Element im Array new Array('pwd', 'pwd2') wiederholen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top