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 neveropen. So, on typing it will show like this ************* And on clicking the checkbox it will show the characters: neveropen.
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="neveropen"              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> |
Output:
Show and hide passwords using JavaScript
