Show and hide password using JavaScript

0 0 1 minute read

This article will show you how to Hide/Show passwords using JavaScript. While filling up a form, there comes a situation where we type a password and want to see what we have typed till now. To see that, there is a checkbox click on which makes the characters visible. In this article, we will add the toggle password feature using JavaScript.

Approach:

Create an HTML form that contains an input field of type password.
Create a checkbox that will be responsible for toggling.
Create a function that will respond to toggling when a user clicks on the checkbox.

Example:

Password is zambiatek. 
So, on typing it will show like this ************* 
And on clicking the checkbox it will show the characters: zambiatek.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>
        Show and hide password using JavaScript
    </title>
</head>
 
<body>
    <strong>
        <p>Click on the checkbox to show
            or hide password:
        </p>
    </strong>
 
    <strong>Password</strong>:
    <input type="password" value="zambiatek"
              id="typepass">
 
    <input type="checkbox" onclick="Toggle()">
    <strong>Show Password</strong>
 
    <script>
        // Change the type of input to password or text
        function Toggle() {
            let temp = document.getElementById("typepass");
             
            if (temp.type === "password") {
                temp.type = "text";
            }
            else {
                temp.type = "password";
            }
        }
    </script>
</body>
</html>