Description:
In some scenario, we need to allow user to
view and verify their password when logging into some website as well as during
registration.
To view password text, there are lot of
plugins are available. I don’t think that a jquery plugin is required for this.
We can easily achieve with simple javascript code.
I have added two input text boxes. One textbox with password type and another one
is text type. Textbox with text mode used to show password and it will be
hidden by default.
For live demo, click here.
Example program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script
type="text/javascript">
$(document).ready(function () {
$('#txtPwd').blur(function () {
$('#txthdnPwd').val($(this).val());
});
$('#chkHidShw').change(function () {
var
isChecked = $(this).prop('checked');
if
(isChecked) {
$('#txtPwd').hide();
$('#txthdnPwd').show();
$('#txthdnPwd').attr('readonly', 'readonly');
}
else
{
$('#txtPwd').show();
$('#txthdnPwd').hide();
}
});
});
</script>
</head>
<body>
<form
id="form1"
runat="server">
<div>
UserName:
<input type="text" id="txtUser" runat="server" />
<br />
Password:
<input type="password" id="txtPwd" runat="server" />
<input type="text" id="txthdnPwd" style='display: none;' />
<br />
<input type="checkbox" id="chkHidShw" /> Show Password
</div>
</form>
</body>
</html>
Hide and show passwords with jquery, Toggle password
visibility using Jquery, Jquery Hide and show password, Show password text
using Jquery, How to hide and show password text using Javascript, Checkbox to
show and hide password using Jquery, Display hide and show password text using
Jquery
0 comments:
Post a Comment