Mostrar y ocultar contraseñas con jQuery

Si has querido dotar a tus formularios de algo más de funcionalidad como poder mostrar/ocultar las contraseñas, aquí te explico como, de forma muy sencilla. Tan solo nos hará falta unos minutos para poner a punto todo. ¡Vamos con ello!.

ACTUALIZADO. Mostramos el icono con los cambios de mostrar/ocultar contraseña.

Lo primero será construir nuestro formulario:

<form action="" method="">

<label class="label">Usuario</label>

<input type="text" name="user" class="login" placeholder="Introduce tu usuario">

<label class="label">Contraseña</label>

<input type="password" id="password" placeholder="Introduce tu contraseña" name="contrasenya">
<span class="mdi mdi-eye" id="mostrar"> <span class="pwdtxt" style="cursor:pointer;">Mostrar contraseña</span></span>

<input type="submit" value="Entrar" name="login">

</form>

Un formulaio muy básico y sin entrar en detalles como estilizarlo con CSS, etc etc. No es el propósito de este tutorial.

Si obsevamos justo debajo del botón estamos usando un icono de Font Awesome y éste, será el que nos sirva de guia en nuestro script.

$(document).ready( function(){

$('#mostrar').click(function(){
//Comprobamos que la cadena NO esté vacía.
if($(this).hasClass('fas-fa-eye') && ($("#password").val() != ""))
{
$('#password').removeAttr('type');
$('#mostrar').addClass('fas-fa-eye-slash').removeClass('fas-fa-eye');
$('.pwdtxt').html("Ocultar contraseña");
}

else
{
$('#password').attr('type','password');
$('#mostrar').addClass('fas-fa-eye').removeClass('fas-fa-eye-slash');
$('.pwdtxt').html("Mostrar contraseña");
}
});

});

Cuando clickemos a nuestro icono, el script comprobará que tenga la clase predeterminada. Al ser verdadera la condición , quitara el atributo type de nuestro campo PASSWORD. Con lo cual, será visible nuestro password y además , cambiará la clase del ojo.

Por el contrario , si ya tenemos la contraseña al descubierto y volvemos a clicka a nuestro icono, añadiremos el atributo type con su correspondiente valor que en este caso sera de tipo password y así volveremos a dejar la contraseña oculta.

Y con esto ya tendremos incorporada la funcionalidad de mostrar/ocultar contraseña a nuestro antojo. Fácil, verdad?.

Un saludo.