Toggle Password Display in HTML5 with jQuery

Do you have  a password field that the user wants to be able to view at the click of a button? Here is the solution I came up with to handle that need…

The field…

<div class="input-group">
  <input type="password" name="password" value="P@$$w0rD" placeholder="Password" id="input-password" class="form-control" required>
  <span id="view-password" class="input-group-addon"><i class="fa fa-eye" aria-hidden="true"></i></span>
</div>

The javascript…

<script><!--
$('#view-password').click(function(){
  $password = $('#input-password');
  if ($password.prop('type') == 'password') {
    $password.prop('type', 'text');
  } else {
    $password.prop('type', 'password');
  }
  $('i', this).toggleClass('fa-eye-slash'); 
});
//--></script>

This example relies on BootstrapFont Awesome, and jQuery but can easily be achieved using your a basic button and pure javascript.

jsFiddle: https://jsfiddle.net/rmullaney77/0szapv57/2

Note: Only tested with Google Chrome v60 (64-bit)

Leave a Reply

Your email address will not be published. Required fields are marked *