Reveal/Unmask/Copy Password Strings In Bootstrap - Peeper

The Peeper jQuery/Bootstrap plugin adds masks and toggle/copy buttons to password fields that allow the visitor to unmask, show/hide, and copy password strings using custom trigger events (click, mouseup, etc).

Dependencies

• jQuery
• Bootstrap 4+
• Font Awesome (or any 3rd iconic font)

See also:

• Password Visibility Toggler For Bootstrap 4
• Show And Hide Passwords With Bootstrap 4
• Show/Hide Password Field Text with Bootstrap 3

How to use it:

1. Load the required JavaScript and CSS resources in the HTML page.

<link rel="stylesheet" href="/path/to/bootstrap.min.css" />
<link href="/path/to/font-awesome.min.css" />
<script src="/path/to/jquery.min.js"></script>

2. Load the Peeper plugin's files in the page.

<link rel="stylesheet" href="dist/css/jquery-peeper.min.css" />
<script src="dist/js/jquery-peeper.min.js"></script>

3. Attach the function to the password field and done.

<input id="example" type="password" class="form-control" name="password" value="password here">

$(function(){
  $("#example").peeper();
});

4. Customize the passwork mask.

$("#example").peeper({

  // enable/disable the mask
  mask: true,

  // from 0 to 1
  maskOpacity: 1,

  // gray, red, green, blue or custom
  maskCss: 'gray'
  
});

5. Customize the trigger event to toggle the visibility of the password. Default: 'mouseup'.

$("#example").peeper({

  showEvent: 'click'

});

6. Determine whether to automatically hide the password after a certain timeout.

$("#example").peeper({

  autohide: true,
  autohideTime: 4000

});

7. Customize the password toggle/copy buttons.

$("#example").peeper({

  showPasswordCss: 'fa fa-key',
  copyPasswordCss: 'fa fa-copy'

});

8. Reveal the password by clicking on the mask.

$("#example").peeper({

  showElement: '.peeper-mask',
  showEvent: 'click'

});

9. Determine whether to show the password toggle/copy buttons.

$("#example").peeper({

  showCopyBtn: true,
  showPasswordBtn: true

});

10. Customize the duration of the animation. Default: 300ms.

$("#example").peeper({

  animateDuration: 500

});

---

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