javascript - strength - password equal jquery

Control "Mostrar contraseña como texto"

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 (al menos Firefox) no permiten el cambio dinámico del atributo type de los campos de entrada, así que no puedo simplemente cambiar type="password" para 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 este , 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

Nunca lo intenté, pero ¿no puede acceder a la propiedad de valor del elemento?

si tienes algo como ...

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

Luego, en JavaScript / jQuery ...

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

Answer 2

Puedes hacer algo como esto:

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

Answer 3

Si puedo, no creo que sea una buena idea mostrar la contraseña en el 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 la visualización de la contraseña por encima del hombro

También creo que si solo quieres ayudar a los usuarios a evitar errores tipográficos, dales más oportunidades antes de que se desactive la contraseña. Creo que el "3" típico que implementan la mayoría de los sitios no es realmente necesario, sugeriría "10" intentos, o quizás "5", si se quiere ser muy 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 4

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

Tienes que lidiar con seguir para una solución completa:

• javascript no está permitido , entonces no debería mostrar la casilla de verificación elegir contraseña
• la función de autocompletar está activada ; como escribí, no puede mostrar la contraseña rellena 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 este jQuery

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

Para agregar casillas de verificación sobre la marcha, puede usar el siguiente complemento 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 así encontrará el área de entrada 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, ya que el valor del tipo de contraseña será visible en el código; sin embargo, para evitarlo, siempre 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";
}