Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Como realizar botón de ver contraseña
Danniel Navas
Danniel Navas

Posted on

     

Como realizar botón de ver contraseña

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>
Enter fullscreen modeExit fullscreen mode

Utilizare un poco de css para cambiar el cursor

#viewPassword{cursor:pointer;}
Enter fullscreen modeExit fullscreen mode

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');
Enter fullscreen modeExit fullscreen mode

2.viewPassword que sera nuestro texto:

letviewPassword=document.getElementById('viewPassword');
Enter fullscreen modeExit fullscreen mode

3.Y una que contendrá una variable booleana

letclick=false;
Enter fullscreen modeExit fullscreen mode

Ahora a la variable viewPassword le agregaremos un evento que este escuchando la acción click

viewPassword.addEventListener('click',(e)=>{}
Enter fullscreen modeExit fullscreen mode

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}
Enter fullscreen modeExit fullscreen mode

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}})
Enter fullscreen modeExit fullscreen mode

Demo:JSFielddle - Ver contraseña

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

💻 Frontend Developer Master🚀 sci-fi fan
  • Location
    Bogota
  • Education
    Ingeniero de sistemas
  • Work
    Frontend Developer master 💪
  • Joined

More fromDanniel Navas

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp