jQuery Show Hide Password

jQuery Show Hide Password

In this article, I am going to discuss jQuery Show Hide Password with Examples. Please read our previous article, where we discussed how to optimize the jQuery Progress Bar. At the end of this article, you will learn how to toggle password visibility using jQuery.

Example:

One of the simplest ways of achieving this show/hide password is by changing the type attribute of the password field depending on the checked status of the Show password checkbox

  1. If the Show password checkbox is CHECKED change the type to text
  2. If the Show password checkbox is NOT CHECKED change the type to password

We have used the ternary operator to do so.

Index.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">
    <link rel="stylesheet" href="D:\MyWebsiteDocuments\JQuery\style.css">
    <title>Login Page</title>
</head>
<body>
    <section>
        <div class="contentBox">
            <div class="formBox">
                <h2 class="login">Login</h2>
                <form>
                    <div class="inputBox">
                        <input type="text" name="username" placeholder="User Name" size="30">
                    </div>

                    <div class="inputBox">
                        <input type="password" id="txtPassword" name="password" placeholder="Password">

                    </div>
                    <label for="showPassword"><input type="checkbox" id="showPassword">Show Password</label>

                    <div class="inputBox">
                        <input id="login" type="submit" value="Log In">
                    </div>

                    <div class="remember">
                        <label for="remember"><input type="checkbox" id="remember">Remember Me</label>
                        <a class="link" href="#">Forgot Password?</a>
                    </div>
                </form>
            </div>
            <a href="#" id="create" class="link">Create an Account</a>
        </div>
    </section>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#showPassword').click(function () {
                $('#txtPassword').attr('type', $(this).is(':checked') ? 'text' : 'password');
            });
        });
    </script>
</body>
</html>
Style.css
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
.contentBox {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
}
.formBox {
  margin: auto;
  background-color: #bec2bf;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 350px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.login {
  color: black;
  font-size: 1.5em;
  text-align: center;
  margin-top: 20px auto;
  padding-top: 20px;
}
.inputBox {
  width: 100%;
  margin: 20px auto;
}
.inputBox input {
  width: 100%;
  height: 40px;
  margin: auto;
  padding: 5px 20px;
  font-size: 16px;
  border-radius: 20px;
  border: none;
  outline: none;
}
input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}
#login {
  background-color: #4478fc;
  color: white;
  border: none;
  outline: none;
}
.remember {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  margin-bottom: 30px;
  font-size: 16px;
}
form {
  width: 80%;
}
.link {
  color: #4478fc;
  text-decoration: none;
}
#create {
  transform: translateY(-130px);
}
Output:

Now run the above code and when the Show password checkbox is NOT CHECKED, the password is masked as shown in the below image.

jQuery Show Hide Password

When the Show password checkbox is CHECKED, the password is in clear text and visible to the user as shown in the below image.

jQuery Show Hide Password with Examples

The problem with the above approach is that it does not work in IE 8 and earlier versions. This is because with IE8 and earlier versions the type attribute of input elements cannot be changed once set. We can modify our code so that the following code works in all browsers including IE8 and earlier versions. 
When the Show password checkbox is clicked
1. Retrieve the value from the password textbox and store it in a variable for later use.
2. Delete the password input filed. 
3. If the “Show password” checkbox is CHECKED, then add a new input field of type text, else add a new input filed of password. In both cases set the value attribute of the input element = the variable created in Step 1.

Please modify the example as shown below and it should work as expected.

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Login Page</title>
</head>
<body>
    <section>
        <div class="contentBox">
            <div class="formBox">
                <h2 class="login">Login</h2>
                <form>
                    <div class="inputBox">
                        <input class="input" type="text" name="username" placeholder="User Name" size="30">
                    </div>

                    <div class="inputBox">
                        <input class="input" type="password" id="txtPassword" name="password" placeholder="Password">
                    </div>
                    <label for="showPassword"><input type="checkbox" id="showPassword">Show Password</label>
                    <div class="inputBox">
                        <input id="login" type="submit" value="Log In" class="input">
                    </div>
                    <div class=" remember">
                        <label for="remember"><input type="checkbox" id="remember">Remember Me</label>
                        <a class="link" href="#">Forgot Password?</a>
                    </div>
                </form>
            </div>
            <a href="#" id="create" class="link">Create an Account</a>
        </div>
    </section>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#showPassword').click(function () {
                var currentPasswordField = $('#txtPassword');
                var currentPassword = currentPasswordField.val();
                currentPasswordField.remove();

                if ($(this).is(':checked')) {
                    $(this).before(`<input class="input" type="text" id="txtPassword" value=${currentPassword} name="password" placeholder="Password">`);
                }
                else {
                    $(this).before(`<input class="input" type="password" id="txtPassword" value=${currentPassword} name="password" placeholder="Password">`);
                }
            });
        });
    </script>
</body>

</html>

In the next article, I am going to discuss how to Increase Decrease Font Size using jQuery with Examples. Here, in this article, I try to explain jQuery Show Hide Password with Examples and I hope you enjoy this jQuery Show Hide Password article.

Leave a Reply

Your email address will not be published.