Introduction

In this blog, we will discuss how to create a button to show and hide passwords using jQuery in ASP.NET.

By clicking the checkbox or hovering the mouse on the icon, we can make the password visible.

Step 1

Create a new project in the Visual Studio version of your choice with an empty template. Give it a meaningful name.

Step 2

Add a web form to your project. Right-click and choose a new item, select web form, and give it a name.

Step 3

Add jQuery, bootstrap, and fa icon cdn links to the head section.

1. <link rel=“stylesheet” href=“https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>  
2. <link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css”>  
3. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”>  

Step 4

Write JavaScript and function to hide and show the password.

1. <script type=“text/javascript”>  
2.         $(document).ready(function () {  
3.             $(‘#show_password’).hover(function show() {  
4.                 //Change the attribute to text  
5.                 $(‘#txtPassword’).attr(‘type’, ‘text’);  
6.                 $(‘.icon’).removeClass(‘fa fa-eye-slash’).addClass(‘fa fa-eye’);  
7.             },  
8.             function () {  
9.                 //Change the attribute back to password  
10.                 $(‘#txtPassword’).attr(‘type’, ‘password’);  
11.                 $(‘.icon’).removeClass(‘fa fa-eye’).addClass(‘fa fa-eye-slash’);  
12.             });  
13.             //CheckBox Show Password  
14.             $(‘#ShowPassword’).click(function () {  
15.                 $(‘#Password’).attr(‘type’, $(this).is(‘:checked’) ? ‘text’ : ‘password’);  
16.             });  
17.         });  
18.       

#asp.net #jquery