Realizando un proyecto en mi trabajo me encontré con el la pantalla de login donde solicitaban realizar un link que mostrara la contraseña cuando le diera click, la solución que realice fue muy sencilla y aquí te mostrare como lo realice:
Voy a utilizar una librería llamada Materializecss con esto iniciaremos
El código html es el siguiente
<div class="container">
<div class="row">
<div class="col s12 m12 l6">
<label for="password">Ingrese su contraseña</label>
<input type="password" id="password">
</div>
<div class="col s12">
<button id="viewPassword">Mostrar contraseña</button>
</div>
</div>
</div>
Utilizare un poco de css para cambiar el cursor
#viewPassword{
cursor:pointer;
}
Y en el Javascript es donde ira nuestra funcionalidad
Primero creamos tres variables que contendrán nuestros objetos del DOM
1.Password:
let password = document.getElementById('password');
2.viewPassword que sera nuestro texto:
let viewPassword = document.getElementById('viewPassword');
3.Y una que contendrá una variable booleana
let click = false;
Ahora a la variable viewPassword le agregaremos un evento que este escuchando la acción click
viewPassword.addEventListener('click', (e)=>{
}
Y dentro evaluaremos como se encuentra nuestra variable click si se encuentra en false cambiaremos el type de password a text y a click le asignaremos true así:
if(!click){
password.type = 'text'
click = true
}else if(click){
password.type = 'password'
click = false
}
El código completo seria:
let password = document.getElementById('password');
let viewPassword = document.getElementById('viewPassword');
let click = false;
viewPassword.addEventListener('click', (e)=>{
if(!click){
password.type = 'text'
click = true
}else if(click){
password.type = 'password'
click = false
}
})
Top comments (0)