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

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.


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

<!DOCTYPE html>
 <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>
    // 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";



  • Hide password:
  • Show password:

This article is attributed to GeeksforGeeks.org

You Might Also Like

leave a comment



load comments

Subscribe to Our Newsletter