Reveal Hidden Password In Bootstrap Input - show-hide-password.js

A show/hide password plugin for Bootstrap that allows the user to reveal the hidden password by clicking on the toggle icon in the password field.

Supports both Bootstrap 4 and Bootstrap 3 frameworks. Requires Font Awesome iconic font for the toggle (eye open & eye close) icons.

How to use it:

1. Load the needed jQuery library, Font Awesome, and Bootstrap framework in the document.

<!-- Font Awesome -->
<link rel="stylesheet" href="/path/to/fontawesome/all.css>
<!-- Bootstrap Stylesheet -->
<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<!-- jQuery -->
<script src="/path/to/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="/path/to/popper.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>

2. Download and load the minified version of the jQuery show-hide-password.js script after jQuery.

<script src="show-hide-password.min.js"></script>

3. Attach the function to the password field and the plugin will take care of the rest.

<input type="password" class="form-control" />

$(function(){
  $('input[type=\'password\']').showHidePassword();
});

4. Customize the styles of the toggle icons.

$(showHideIcon).css({
  position: 'absolute',
  display: 'none',
  top: '0',
  right: '0',
  height: $(this).outerHeight(true) - 2,
  marginTop: '1px',
  padding: '6px 11px',
  cursor: 'pointer',
  zIndex : '999',
  color : 'black'
});

Changelog:

2020-06-14

• Added show/hide eye icon based on input element value.

---

This awesome jQuery plugin is developed by openix. For more Advanced Usages, please check the demo page or visit the official website.