Skip to content
Related Articles

Related Articles

Show and hide password using JavaScript
  • Last Updated : 19 Feb, 2019

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 clicking on which makes the characters visible.
In this post, this feature i.e. toggling password is implemented using JavaScript.

Algorithm
1)Create a HTML form which contain an input field of type password.

2)Create a checkbox which will be responsible for toggling.

3)Create a function which will response for toggling when a user clicks on the checkbox.

Examples:



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




<!DOCTYPE html>
<html>
<body>
  
 <b><p>Click on the checkbox to show
           or hide password: </p></b>
  
 <b>Password</b>: <input type="password" 
     value="geeksforgeeks" id="typepass"
  
 <input type="checkbox" onclick="Toggle()">
    <b>Show Password</b>
  
    <script>
    // Change the type of input to password or text
        function Toggle() {
            var temp = document.getElementById("typepass");
            if (temp.type === "password") {
                temp.type = "text";
            }
            else {
                temp.type = "password";
            }
        }
</script>
</body>
</html>


Output:

  • Hide password:
  • Show password:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :