How to display text in password field using javascript in asp.net

How to display text in password field using javascript in asp.net

12:34:00 AM
 Description:-

 We use font icon as Show/Hide button for display/hide password in textbox. Download below folder and copy paste in your project folder.

 Download Font and CSS File

Add HTML Markup

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Code Scratcher - Show Hide Password</title>
<script src="JS/jquery.min.js"type="text/javascript"></script>
<link href="font_icon_css/font-awesome.min.css"rel="stylesheet"type="text/css"/>
<script type="text/javascript">
functionShowHidePassword(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: 7px10px;
  border: 1pxsolid#ff0000;
  outline: mediumnone;
  border-radius: 2px;
  line-height: 30px;
  float: left;
}
.dvShowHidePassword
{
  font-size: 15px;
  font-weight: bold;
  margin-left: -38px;
  border-left: 1pxsolid#ff0000;
  padding: 7px10px;
  cursor: pointer;
  line-height: 30px;
  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+ */
}
</style>
</head>
<body>
<form id="form1"runat="server">
<div>
  <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);"> <iclass="icon icon-eye"></i>
      </span>
    </div>
</form>
</body>
</html>

Umesh Patel

Related Posts

Next
« Prev Post
Previous
Next Post »

Thanks for comments.....