jQuery: Show Password without any plugin
HTML Code
First, the HTML part. Define 2 input type textboxes. One with "Password" mode and another with "text" mode. The "text" mode control will be used to show the password and it will be hidden by default.
Password:<input type="password" id="txtPassword" /> <input type="text" id="txthdnPassword" /> <input type="checkbox" id="chkShow"/>Show Password
jQuery Code
First thing we need to do is to hide the plain textbox. And also make it readonly as well.
$('#txthdnPassword').hide(); $('#txthdnPassword').attr('readonly','readonly');
Now, copy the password textbox value to plain textbox value, whenever focus goes out of password textbox. So use blur() event.
$('#txtPassword').blur(function() { $('#txthdnPassword').val($(this).val()); });
Now, the last step is to show/hide textboxes based on checkbox value. So first find out whether it is checked or not. Based on it's status show/hide respective textboxes.
$('#chkShow').change(function() { var isChecked = $(this).prop('checked'); if (isChecked) { $('#txtPassword').hide(); $('#txthdnPassword').show(); } else { $('#txtPassword').show(); $('#txthdnPassword').hide(); } });
So complete code is,
$(document).ready(function() { $('#txthdnPassword').hide(); $('#txthdnPassword').attr('readonly','readonly'); $('#txtPassword').blur(function() { $('#txthdnPassword').val($(this).val()); }); $('#chkShow').change(function() { var isChecked = $(this).prop('checked'); if (isChecked) { $('#txtPassword').hide(); $('#txthdnPassword').show(); } else { $('#txtPassword').show(); $('#txthdnPassword').hide(); } }); });?
See result below
Feel free to contact me for any help related to jQuery, I will gladly help you.