Show hide password characters using javascript,jquery

By
Advertisement

<!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
function fnClick() {
var curval = $('#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









1 comment:

  1. can you please help me. i want to put two different element in same page

    ReplyDelete

Online Casino