Asp.net C# Tutorial 36 – How to show Password in TextBox hover and click function using ASP.Net C#
[email protected] Chirag’s ASP.NET C# Tutorial https://www.chirags.in
***********************************************************************************************How to show Password in TextBox hover and click function using ASP.Net C#
***********************************************************************************************
<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”showPasswordHoverClick.aspx.cs” Inherits=”showPasswordHoverClick” %>
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title>Show and Hide Password</title>
<script src=”https://code.jquery.com/jquery-3.6.3.min.js” ></script>
<script >
$(document).ready(function () {
$(‘#showPassword1’).hover(function show() {
$(‘#password1’).attr(‘type’, ‘text’);
$(‘.eyechange’).removeClass(‘eyeopen’).addClass(‘eyeclose’);
},
function () {
$(‘#password1’).attr(‘type’, ‘password’);
$(‘.eyechange’).removeClass(‘eyeclose’).addClass(‘eyeopen’);
});
$(‘#showPassword2’).click(function() {
$(‘#password2’).attr(‘type’, $(this).is(‘:checked’) ? ‘text’:’password’);
});
});
</script>
<style>
.eyeopen {
background: url(images/eye.png) no-repeat scroll 0 0 transparent;
color: #000000;
cursor: pointer;
font-weight: bold;
height: 48px;
padding-bottom: 2px;
width: 48px;
}
.eyeclose {
background: url(images/eye_slash.png)no-repeat scroll 0 0 transparent;
color: #000000;
cursor: pointer;
font-weight: bold;
height: 48px;
padding-bottom: 2px;
width: 48px;
}
</style>
</head>
<body>
<form id=”form1″ runat=”server”>
<table style=”margin-left: auto;margin-right: auto;”>
<tr>
<td>
<h1>Show and Hide password</h1><br />
Password : <asp:TextBox ID=”password1″ TextMode=”Password” runat=”server”></asp:TextBox>
<button id=”showPassword1″ class=”eyeopen eyechange” type=”button”></button><br />
<br />
<br />
Password : <asp:TextBox ID=”password2″ TextMode=”Password” runat=”server”></asp:TextBox>
<asp:CheckBox ID=”showPassword2″ runat=”server” />
</td>
</tr>
</table>
</form>
</body>
</html>
Note: Flow the Process shown in video.
😉Subscribe and like for more videos:
https://www.youtube.com/@chiragstutorial
💛Don’t forget to, 💘Follow, 💝Like, 💖Share & 💙Comment
Tutorial Link:
https://www.chirags.in/tutorials/asp_dot_net_c_sharp_programming
Thanks & Regards,
Chitt Ranjan Mahto “Chirag”
_____________________________________________________________________
Note: All scripts used in this demo will be available in our website.
Link will be available in description.
#aspdotnet
#aspdotnettutorial
#chiragstutorial
#chirags
#chiragsdatabasetutorial
#chiragsdbatutorial
#chirags.in