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
