How to show password by jquery

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
Login Form



No comments :

Please Give Your Feedback