"Mostrar contraseña como texto" control

Question

Tengo un formulario de inicio de sesión habitual que consta de dos campos de entrada, uno para el inicio de sesión, y otro para la contraseña. Actualmente estoy intentando agregar un control que mostrará la contraseña ingresada como texto sin formato, para que el usuario pueda verificar si hay errores tipográficos.

El problema es que los navegadores (Firefox por lo menos) no permiten el cambio dinámico de type atributo de campos de entrada, por lo que no puede simplemente cambiar type="password"-type="text". Otro problema es que los navegadores no permiten obtener el valor del campo de contraseña, por lo que no puedo crear un nuevo input type="text" y establecer su valor en el de la contraseña. He visto varios enfoques diferentes para esta tarea, incluido this one, pero solo funcionan si la contraseña se escribe y falla cuando el navegador la autocompleta.

Entonces, cualquier sugerencia para hacer esto es bienvenida. Estoy usando jQuery.

Answer 1

Usted puede hacer algo como esto:

<input type="password" id="password"> 
<input type="checkbox" onchange="document.getElementById('password').type = this.checked ? 'text' : 'password'"> Show password 

Answer 2

Si se me permite, no creo que es una gran idea para mostrar la contraseña en texto, por las siguientes razones:

1. no se hace comúnmente, por lo que será confuso para el usuario
2. significa que está abierto a lo largo del hombro de visión de la contraseña

también creo que, si lo que desea es ayudar a los usuarios a evitar errores tipográficos, darles más oportunidades antes de la contraseña está desactivada. Creo que el "3" típico que implementan la mayoría de los sitios no es realmente necesario, sugiero que "10" intentos, o quizás "5", si quieres ser realmente conservador, es bastante aceptable. Simplemente cuenten hacia abajo para ellos, y permítales resolver los errores por su cuenta.

Solo mi humilde opinión.

Answer 3

que nunca han intentado esto mismo, pero no puedes acceder a la propiedad valor del elemento?

si tiene algo así como ...

<input id="pw" name="pw" type="password" /> 

Luego, en JavaScript/jQuery ...

var pass = document.getElementById('pw').value; 

$('pw').val() 

Answer 4

No hay ninguna posibilidad de mostrar la contraseña autorrellenará por razones de seguridad. Cualquiera puede ver tu contraseña en tu computadora para esta página si es posible.

usted tiene que tratar con el siguiente para solución completa:

• no se permite Javascript - entonces usted no debe mostrar elegir casilla contraseña
• Autocompletar está activada - como he escrito, se No se puede mostrar la contraseña llena de esta manera. Eaighter apaga la función de autocompletar u oculta la contraseña del programa hasta que el usuario vuelva a escribir la contraseña.

autocompletar apagar por esta jQuery

$('input').attr('autocomplete', 'off'); 

Para añadir casilla de verificación sobre la marcha puede utilizar siguiente plugin de jQuery-showPassword disponible en http://www.cuptech.eu/jquery-plugins/

Answer 5

$('.show-password').change(function() { 
    if ($("#form-fields_show-password").attr('checked')) { 
    var showValue = $('#form-fields_password').val(); 
    var showPassword = $('<input type="text" size="50" required="required" name="form- fields[password]" id="form-fields_password" class="password required" value="'+showValue+'">'); 
    $('#form-fields_password').replaceWith(showPassword); 
    } else { 
    var hideValue = $('#form-fields_password').val(); 
    var hidePassword = $('<input type="password" size="50" required="required" name="form-fields[password]" id="form-fields_password" class="password required" value="'+hideValue+'">'); 
    $('#form-fields_password').replaceWith(hidePassword); 
    } 
}); 

Algo como esto se encuentra la entrada área, y almacenar el valor en una variable llamada showValue. Luego puede reemplazar el elemento con type = "password", con html nuevo donde type = "text" y si la casilla de verificación está desmarcada, el valor se colocará en el campo de tipo de contraseña.

Existe un problema con este método porque el valor del tipo de contraseña será visible en el código; sin embargo, para evitarlo puede eliminar el atributo de valor del tipo de contraseña y obligar al usuario a volver a escribir. Si puedes vivir con eso en tu aplicación.

Answer 6

function change(){ 
id.type="password"; 
} 


<input type="text" value="123456" id="change"> 
<button onclick="pass()">Change to pass</button> 
<button onclick="text()">Change to text</button> 
<script>function pass(){document.getElementById('change').type="password";} function text(){document.getElementById('change').type="text"; } </script> 

Answer 7

Password: <input type="password" value="" id="myInput"><br><br> 
<input type="checkbox" onclick="myFunction()">Show Password 

<script> 
function myFunction() { 
    var x = document.getElementById("myInput"); 
    if (x.type === "password") { 
     x.type = "text"; 
    } else { 
     x.type = "password"; 
    } 
} 
</script>