How to Show and Hide Password Using jQuery

As you know the Password always displays in the form of a bullet. Because It can be protected from hacking. But most of the users need a visible password. Hence, you can give them a password visibility option with jQuery. Therefore, In this tutorial, you will know How to Show and Hide Password using jquery.

Table of Contents

Show and Hide Password Using jQuery

We always declare a password input filed with type= “password” like <input type="password">. When you begin to enter some characters into the password field. It will change each character into the bullet symbol.

So, On user request, you need to update the password field with the text field. Because of text field always displays input data in a readable format. Hence, I am going to provide you the script to implement this feature.

Read Also –

Create jQuery TO DO List

Add and Remove Input Fields Using jquery

jQuery Form Validation

1. Create Password Input Field Using HTML

Write the following HTML code to create password Field

<label>Password</label>
<div>
<input type="password" id="passInput" placeholder="Enter Password">
</div>
<input type="checkbox" id="showPass">Show Password

2. Create Show and Hide Password Using jQuery

First of all, Include the following jQuery library CDN to run jQuery Script

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Use the following jQuery Script to show and hide the password.

$(document).ready(function(){
  
   $('#showPass').on('click', function(){
      var passInput=$("#passInput");
      if(passInput.attr('type')==='password')
        {
          passInput.attr('type','text');
      }else{
         passInput.attr('type','password');
      }
  })
})

The above script will work as the following ways on clicking the checkbox Input Field

If the input field has a password type attribute, It will be updated with the text type attribute. So, In this case, the password will be readable.
If the input field has text a type, it will be updated with the password type attribute. So, In this case, the password will not be readable.

Suggestions:

Dear Developers, I hope you have got the above coding concepts. Now you can easily implement the above functionality in your project.

If you have any questions related to this tutorial, you can ask me through the below comment box. Even you can suggest topics related to web development.

Thanks For giving time on this tutorial…