
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
<divclass="container"><divclass="row"><divclass="col s12 m12 l6"><labelfor="password">Ingrese su contraseña</label><inputtype="password"id="password"></div><divclass="col s12"><buttonid="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:
letpassword=document.getElementById('password');
2.viewPassword que sera nuestro texto:
letviewPassword=document.getElementById('viewPassword');
3.Y una que contendrá una variable booleana
letclick=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}elseif(click){password.type='password'click=false}
El código completo seria:
letpassword=document.getElementById('password');letviewPassword=document.getElementById('viewPassword');letclick=false;viewPassword.addEventListener('click',(e)=>{if(!click){password.type='text'click=true}elseif(click){password.type='password'click=false}})
Top comments(0)
For further actions, you may consider blocking this person and/orreporting abuse