How to Toggle Password Visibility using HTML and JavaScript ?

0 0 1 minute read

In this article, we will learn about how to toggle password visibility using HTML and Javascript. Passwords are those input types that appear as ******. It can be shown to the user by adding a feature of the eye icon so that the user can see the password.

Approach: The following approach will be implemented to toggle visibility of the Password:

We will display the use of two image icons “eye.png” and “eyeslash.png“
Toggle these images using JavaScript.
We will toggle the type of input field of password ( text -> password and password -> text )

Example: In this example, we will see the toggling the Password Visibility using HTML and JavaScript.

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h2 style="color:green"> 
        zambiatek 
    </h2> 
      
    <div class="col-sm-6"> 
        <form method="post" class="form-group "> 
            Username 
            <input type="text" name="username" 
                autofocus="" autocapitalize="none" 
                autocomplete="username" required=""
                id="id_username" class="form-control"> 
                  
            Password 
            <input type="password" name="password" 
                class="form-control" 
                autocomplete="current-password" required=""
                id="id_password"> 
  
            <img src= 
"https://media.zambiatek.com/wp-content/uploads/20210917150049/eyeslash-300x240.png"
                width="1.8%" height="1%" 
                style="margin-left: -5%;display:inline; 
                vertical-align: middle"  
                id="togglePassword"> 
  
            <button type="submit" class="btn btn-primary"> 
                Login 
            </button> 
        </form> 
    </div> 
</body> 
  
<script> 
    const togglePassword =  
        document.querySelector('#togglePassword'); 
          
    const password = document.querySelector('#id_password'); 
  
    togglePassword.addEventListener('click', function (e) { 
  
        // Toggle the type attribute 
        const type = password.getAttribute( 
            'type') === 'password' ? 'text' : 'password'; 
        password.setAttribute('type', type); 
  
        // Toggle the eye slash icon 
        if (togglePassword.src.match( 
"https://media.zambiatek.com/wp-content/uploads/20210917150049/eyeslash.png")) { 
            togglePassword.src = 
"https://media.zambiatek.com/wp-content/uploads/20210917145551/eye.png"; 
        } else { 
            togglePassword.src = 
"https://media.zambiatek.com/wp-content/uploads/20210917150049/eyeslash.png"; 
        } 
    }); 
</script> 
  
</html>