DEV Community

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

Posted on

7 1

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

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay