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

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

Utilizare un poco de css para cambiar el cursor

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

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

2.viewPassword que sera nuestro texto:

    let viewPassword = document.getElementById('viewPassword');
Enter fullscreen mode Exit fullscreen mode

3.Y una que contendrá una variable booleana

    let click = false;
Enter fullscreen mode Exit fullscreen mode

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

    viewPassword.addEventListener('click', (e)=>{
    }
Enter fullscreen mode Exit 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
    }else if(click){
        password.type = 'password'
        click = false
    }
Enter fullscreen mode Exit fullscreen mode

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

Demo: JSFielddle - Ver contraseña

Top comments (0)