Show hide password characters using javascript,jquery

<!DOCTYPE html>
<html>
<head runat=”server”>
<title>Show Hide Password</title>
<%–Include jQuery Library–%>
<script type=”text/javascript”src=”https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
</head>
<body>
<form>
<div style=”margin:80px;”>
<input type=”hidden”value=”0″id=”mode”/>
<input type=”password”id=”txtpass”/>
<button id=”btnclick”onclick=”return fnClick();”>
    Show Password
</button>
</div>
</form>
<script type=”text/javascript”>
//Javascript code to show hide password characters
functionfnClick() {
varcurval = $(‘#mode’).val();
$(‘input[type=”password”],input[type=”input”]’).each(function () {
if(curval == ‘0’) {
$(this).replaceWith(‘<input type=”input” id=”txtpass” value=”‘ + this.value + ‘”>’);
$(‘#mode’).val(‘1’);
$(‘#btnclick’).text(‘Hide Password’);
return false;
}
else {
$(this).replaceWith(‘<input type=”password” id=”txtpass” value=”‘ + this.value + ‘”>’);
$(‘#mode’).val(‘0’);
$(‘#btnclick’).text(‘Show Password’);
return false;
}
});
return false;
}
</script>
</body>
</html>

 The Output will look like

Output - Show hide password characters using javascript,jquery









Comments

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!