@claviska/jquery-show-password

jquery.showPassword.js - Show and hide the contents of a password input on demand.

Developed by Cory LaViska for A Beautiful Site, LLC

Licensed under the MIT license: http://opensource.org/licenses/MIT

Overview:

This plugin provides a minimal, lightweight solution to show the user the contents of a password field.

Features:

• Show/hide the contents of any password field.
• Works with any CSS framework, including Bootstrap.
• Use any trigger you want (an icon, button, link, etc.).
• Change event lets you modify the trigger state (i.e. change text/icon when the field is toggled).
• Works in all modern browsers. Does not work in IE6/7/8.
• Compact! (About 70 lines)

Installing

Include the minified version of this plugin in your project or install via NPM:

npm install --save @claviska/jquery-showPassword

Using

Minimal example:

<input id="password" type="password">
<button id="trigger" type="button">Toggle</button>

$('#trigger').showPassword({
  input: '#password'
});

Bootstrap 4 example (with FontAwesome):

<div class="input-group">
  <input id="password" class="form-control" type="password">
  <span class="input-group-btn">
    <button id="trigger" type="button" class="btn btn-secondary">
      <i class="fa fa-eye"></i>
    </button>
  </span>
</div>

$('#trigger').showPassword({
  input: '#password',
  change: function(type) {
    $(this).find('.fa')
      .toggleClass('fa-eye', type === 'password')
      .toggleClass('fa-eye-slash', type === 'text');
  }
});

Options

• input: a selector that points to the password input element (e.g. #my-password).

Callbacks

All callbacks are called in the context of the respective trigger.

• change: runs when the password field is toggled. The callback will receive the new state of the input as an argument, which will always equal either password or text.

Methods

Methods are called using this syntax:

$('#trigger').showPassword('method', arg);

The following API methods are supported:

• destroy: returns the control to its pre-initialized state.