Source Code:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="hideandshowpassword.aspx.cs"
Inherits="hideandshowpassword" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Show Hide Password</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
function ShowHidePassword(ID) {
if (document.getElementById($("#" + ID).prev().attr('id')).type == "password") {
$("#" + ID).attr("data-hint", "Hide");
$("#" + ID).find("i").removeClass("icon-eye").addClass("icon-eye-slash");
document.getElementById($("#" + ID).prev().attr('id')).type = "text";
}
else {
$("#" + ID).attr("data-hint", "Show");
$("#" + ID).find("i").removeClass("icon-eye-slash").addClass("icon-eye");
document.getElementById($("#" + ID).prev().attr('id')).type = "password";
}
}
</script>
<style type="text/css">
body {
width: 500px;
margin: 20px;
font-family: "Titillium", Arial, sans-serif;
}
.textAreaBoxInputs {
min-width: 260px;
width: auto;
height: 30px;
font-size: 15px;
padding: 7px 10px;
border: 1px solid #00ff21;
outline: medium none;
border-radius: 2px;
line-height: 30px;
float: left;
}
.dvShowHidePassword {
font-size: 15px;
font-weight: bold;
margin-left: -38px;
border-left: 1px solid #00ff21;
padding: 7px 10px;
cursor: pointer;
line-height: 50px;
ser-select: none;
-webkit-user-select: none; /* webkit (safari, chrome) */
-moz-user-select: none; /* mozilla */
-khtml-user-select: none; /* webkit (konqueror) */
-ms-user-select: none; /* IE10+ */
}
@font-face {
font-family: 'FontAwesome';
src: url('fonts/fontawesome-webfont.eot?v=4.1.0');
src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
.icon {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* makes the font 33% larger relative to the icon container */
.icon-lg {
font-size: 1.33333333em;
line-height: 0.75em;
vertical-align: -15%;
}
.icon-eye:before {
content: "\f06e";
}
.icon-eye-slash:before {
content: "\f070";
}
</style>
</head>
<body>
<h2>Welcome to Code Solutions</h2>
<div style="margin-bottom: 10px;">
Enter your password in below textbox
</div>
<input id="txt_Password" class="textAreaBoxInputs" type="password">
<span id="ShowHidePassword" class="dvShowHidePassword hint--top hint--bounce hint--rounded"
data-hint="Show" onclick="ShowHidePassword(this.id);"><i class="icon icon-eye"></i>
</span>
<p>Please click on Eye for see the password</p>
</body>
</html>
