¿Cómo tener dos campos de contraseña controlados por una casilla de verificación?

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

  •  11-10-2019
  •  | 
  •  

Pregunta 

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

Estoy utilizando el código anterior en una forma un poco más compleja.

Tengo dos campos separados "contraseña" en el formulario. Con el código actual que pueda tener el primer campo de contraseña muestran los personajes a medida que se escriben cuando se marca la casilla de verificación.

Además, los códigos notifica al usuario si está escribiendo con mayúsculas activadas bloqueo.

Me gustaría tener ambos campos de contraseña que presentan el mismo comportamiento en lugar de sólo el primer campo. Por desgracia, no sé cómo hacer que esto suceda.

Gracias por la ayuda.

EDIT:
Una solución simple puede ser más fácil de encontrar con el siguiente código. Estoy dispuesto a utilizar cualquiera de ellas. 

<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>
¿Fue útil?

Solución 5

La mayoría de las respuestas no funcionaba. Uno o dos me queda por probar porque significaban mayores cambios en mi código de lo que quería. Acabé encontrar otro método para revelar las contraseñas: "Mostrar contraseña como texto" control
He adaptado el método allí para mi escenario de múltiples campos de contraseña: 

<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

Otros consejos

¿Por qué no acaba de cambiar el atributo type de las entradas de contraseña en su función unmask()? De esta manera será más fácil para usted para manejar más de 1 campo. Después de comprobar si tiene que girar el input en un uno o un ser text password, hace esto: 

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

Sugiero cambiar su enfoque un poco.

Se podría modificar el cliente sin ningún impacto en el código del servidor. Por ejemplo, me gustaría probar con 2 cajas de entrada con el mismo nombre. Si alguna vez tiene una sola caja visible mientras que el otro tiene el conjunto de atributos HTML 'discapacitados', la caja visibles siempre será la única presentada.

De esta manera, el código del lado del servidor sólo tendría que buscar a 1 de entrada, bajo un único nombre.

jQuery bloqueo de mayúsculas test / función? establecer ambos campos a la clase de contraseña y: 

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

Prueba esto: 

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

Lo que esto hace es que sea lo que el código funciona en pwd y pwd2 repitiendo para cada elemento de la matriz new Array('pwd', 'pwd2').

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top