To show the password while user typing we have to change the type attribute of particular element from password to text.
We use input element with type="password" attribute to take user input as password. The type="password" attribute hide the character and display dot to user. Then simply if we want to show the password to the user we change the attribute type="password" to type="text".
CODE
<!DOCTYPE html>
<html>
<head>
<title>How to show password by jquery</title>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#chkShowPassword').change(function () {
if($(this).prop('checked') == true) {
$('#txtPassword').attr('type', 'text');
}
else {
$('#txtPassword').attr('type', 'password');
}
});
});
</script>
</head>
<body>
<fieldset>
<legend>Login Form</legend>
<input type="text" id="txtUserId" placeholder="Enter UserId" /><br /><br />
<input type="password" id="txtPassword" placeholder="Enter Password" /><br /><br />
<label><input type="checkbox" id="chkShowPassword" /> Show Password</label>
</fieldset>
</body>
</html>
DISPLAY
No comments :
Please Give Your Feedback