jQuery Password Visibility Toggler For Bootstrap 4

Yet another jQuery plugin to generate a Password Visibility Toggler inside your Bootstrap 4 password field that allows you to display password as plain text when toggled.

See also:

• Show/Hide Password Field Text with jQuery and Bootstrap3

Installation:

# NPM
$ npm install canchito-dev/bootstrap-password-toggler --save

How to use it:

1. Load jQuery JavaScript library and Bootstrap 4 framework in the html file.

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

3. Load Font Awesome Iconic Font for custom password toggle icons.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

4. Load the bootstrap-password-toggler.js script right before the closing body tag.

<script src="bootstrap-password-toggler.min.js"></script>

5. Add the data-toggle="password" attribute to the password field. Done.

<input class="form-control" id="password" name="password" placeholder="Password" required 
       data-toggle="password" value="testPassword">

6. Config the Password Visibility Toggler.

$('[data-toggle="password"]').password({
  append: 'right',        // can be left or right
  iconPrefix: 'fa',   
  iconShow: 'fa-eye',
  iconHide: 'fa-eye-slash',
  tooltip: 'Show/Hide password',
  debug: true
});

Change log:

2018-05-06

• Fixed bug Append Issue

2018-02-12

• Bugfix

2018-02-11

• JS update

2017-12-10

• Added multi instance support
• Added support for Font Awesome v5

---

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