How to Toggle Password Visibility in JavaScript ?

Last Updated : 11 May, 2023

In this article we will discuss how to toggle password visibility in JavaScript we will also use HTML and CSS in order to create a password visibility toggler for our webpage.

Approach: The basic approach towards making password visibility toggler will be quite simple, we will use a button and write a javascript function and call that on the button that will toggle the hidden password to be visible for the user.

How are we going to make a password visibility toggler?

For that we will add a button below the password input box, when we will type our password it will be hidden by default, nowhere in the action part, we will create a function using javascript that we are going to call on that button when the user clicks on that it will toggle the password visibility and button text will also get toggled to the hide when the password gets visible. In the example code, we can see the functions in detail.

Example: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<head>
    <title>Toggle password visibility using javascript</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 15%;
            background-color: rgb(56, 56, 56);
        }
 
        .main {
            height: 360px;
            padding: 20px;
            background-color: rgb(32, 32, 32);
            border-radius: 10px;
        }
 
        .userImage {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: montserrat;
            font-size: 0.8rem;
            color: rgb(255, 255, 255);
            margin-bottom: 40px;
        }
 
        .user_input {
            display: flex;
            height: 40px;
            margin: 20px;
        }
 
        .user_input input {
            border: none;
            border-bottom: 1px solid rgb(255, 255, 255);
            outline: none;
            background-color: rgb(32, 32, 32);
            color: white;
        }
 
        .password_input {
            display: flex;
            height: 40px;
            margin: 20px;
        }
 
        .password_input input {
            border: none;
            border-bottom: 1px solid rgb(255, 255, 255);
            outline: none;
            background-color: rgb(32, 32, 32);
            color: white;
        }
 
        .login_box {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 20px;
        }
 
        .login_button {
            height: 30px;
            width: 100px;
            background-color: rgb(0, 0, 0);
            border-radius: 10px;
            outline: none;
            border: none;
            color: rgb(255, 255, 255);
            font-size: 12px;
            font-family: montserrat;
            cursor: pointer;
        }
 
        .login_button:hover {
            color: rgb(0, 0, 0);
            background-color: #fff;
            transform: translateY(-1px);
        }
 
        #hide_pass {
            display: none;
        }
 
        .popup {
            position: absolute;
            height: 200px;
            width: 350px;
            background-color: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
 
        .popup h2 {
            font-size: 20px;
            font-family: montserrat;
            margin: 20px;
        }
 
        .popup {
            display: none;
        }
 
        .show_or_hide {
            display: flex;
            justify-content: center;
            align-items: center;
        }
 
        #show_pass,
        #hide_pass {
            height: 30px;
            width: 70px;
            background-color: rgb(0, 0, 0);
            color: white;
            border-radius: 10px;
            border: none;
            outline: none;
        }
 
        #show_pass:hover,
        #hide_pass:hover {
            color: rgb(0, 0, 0);
            background-color: #fff;
            transform: translateY(-1px);
        }
    </style>
</head>
 
<body>
    <div class="main">
        <div class="userImage">
            <h1>GeeksforGeeks</h1>
        </div>
        <div class="user_input">
            <input type="text"
                   id="user"
                   placeholder="Username" />
        </div>
        <div class="password_input">
            <input type="password"
                   id="pass"
                   placeholder="Password" />
        </div>
        <div class="show_or_hide">
            <button id="show_pass"
                    onclick="togglePassword();">
                Show
            </button>
            <button id="hide_pass"
                    onclick="togglePassword();">
                Hide
            </button>
        </div>
        <div class="login_box">
            <button class="login_button"
                    onclick="openPopup(),reload()">
                Login
            </button>
        </div>
    </div>
    <div class="popup" id="msg">
        <h2>User logged in successfully!</h2>
    </div>
    <script>
        // This function is used to toggle the password visibility.
        function togglePassword() {
            toggleIcon();
            var x = document.getElementById("pass");
            if (x.type === "password") {
                x.type = "text";
            } else {
                x.type = "password";
            }
        }
        // This function will toggle the show or hide password icon.
        function toggleIcon() {
            var x = document.getElementById("show_pass");
            var y = document.getElementById("hide_pass");
            if (x.style.display === "none") {
                x.style.display = "block";
                y.style.display = "none";
            } else {
                x.style.display = "none";
                y.style.display = "block";
            }
        }
        // This function will open the popup. 
        // that will show the message
        // that user logged in successfully
        function openPopup() {
            if (document.getElementById("user").value === ""
                || document.getElementById("pass").value === "") {
                alert("Please enter username and password");
            } else {
                var x = document.getElementById("msg");
                x.style.display = "flex";
                setTimeout(function () {
                    x.style.display = "none";
                }, 1000);
            }
        }
        // This function will reload the page when 
        // the user clicks on 
        // the login button
        function reload() {
            setTimeout(function () {
                window.location.reload();
            }, 1200);
        }
    </script>
</body>
</html>