In this article, I will explain how to Show or Hide TextBox Password when the "Show Password" CheckBox is checked using jQuery without using any additional jQuery plugin.
The "Show Password" feature allows user to view and verify their password during logging or registration into the website.
First, place a input password textbox, a span element to contain password and a checkbox to show password when it checked into your body part of html as shown below-
HTML:
<body style="background: #E0EDFA; text-align: center; margin-top: 250px;">
<form id="form1">
<input id="txtPass" type="password" placeholder="Password" /><br />
<span id="lblPass" style="color:green;"></span><br />
<input id="chkShowHidePass" type="checkbox" /> Show Password
</form>
</body>
<form id="form1">
<input id="txtPass" type="password" placeholder="Password" /><br />
<span id="lblPass" style="color:green;"></span><br />
<input id="chkShowHidePass" type="checkbox" /> Show Password
</form>
</body>
After that, attach the jquery library link on your head part of page and write the below code in head part shown as below-
JS:
<head>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#txtPass').keyup(function () {
if ($('#chkShowHidePass').prop('checked')) {
$('#lblPass').html($(this).val());
$('#lblPass').show();
}
else {
$('#lblPass').hide();
}
});
$('#chkShowHidePass').change(function () {
if ($(this).prop('checked')) {
$('#lblPass').html($('#txtPass').val());
$('#lblPass').show();
}
else {
$('#lblPass').hide();
}
});
});
</script>
</head>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#txtPass').keyup(function () {
if ($('#chkShowHidePass').prop('checked')) {
$('#lblPass').html($(this).val());
$('#lblPass').show();
}
else {
$('#lblPass').hide();
}
});
$('#chkShowHidePass').change(function () {
if ($(this).prop('checked')) {
$('#lblPass').html($('#txtPass').val());
$('#lblPass').show();
}
else {
$('#lblPass').hide();
}
});
});
</script>
</head>
Now save the file and run on browser.
when the checkbox is checked then it will show the password typed in the password textbox. and when the checkbox is unchecked it will hide password.
Result:
Live Demo:
Show Password
0 comments:
Post a Comment