Skip to content
Related Articles

Related Articles

How to Toggle Password Visibility using HTML and JavaScript ?

View Discussion
Improve Article
Save Article
  • Difficulty Level : Hard
  • Last Updated : 24 Sep, 2021
View Discussion
Improve Article
Save Article

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

  • 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:

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h2 style="color:green">
        GeeksforGeeks
    </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=
                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(
            togglePassword.src =
        } else {
            togglePassword.src =
        }
    });
</script>
  
</html>

Output:        

toggle the Password field


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!