Hide Show Password with JQuery

It's very irritating sometimes to Re-Type passwords, or we just want to be sure what we have written in password is correct or not for this we use on mouse hover password field text visible.  Hide/Show password makes you sure with JQuery that what you have typed.

It can be used on various event handlers means onClick, onmouseover etc. Here in the below we described  password visibilty with only hover function.

This type of pattern seen  IE 10+ and LinkedIn many more sites. hideShowPassword. So lets go through example.

1. Create a password input field

<div class="form-group">
   <label class="col-md-4 control-label" for="Password">Confirm New Password:</label>
   <div class="col-md-6">
      <div class="input-group">
         <form:input type="password" path="confirmPassword"
            id="confirmPassword" class="form-control"
            placeholder="Confirm new Password" required="true" autocomplete="off"/>
         <span class="input-group-btn">
         <button id= "show_password2" class="btn btn-secondary" type="button">
         <span class="glyphicon glyphicon-eye-open"></span>
         </button>
         </span>
      </div>
      <div class="FeRror">this field is required.</div>
   </div>
</div>

3. Include following JQuery Script

<script>
$('#show_password2').hover(function functionName() {
 //Change the attribute to text
 $('#confirmPassword').attr('type', 'text');
 $('#show_password2 .glyphicon').removeClass('glyphicon-eye-open').addClass('glyphicon-eye-close');
}, function () {
 //Change the attribute back to password
 $('#confirmPassword').attr('type', 'password');
 $('#show_password2 .glyphicon').removeClass('glyphicon-eye-close').addClass('glyphicon-eye-open');
}
);
</script>

4. Output