Easy Password Visibility Toggle Plugin For jQuery - password-toggle-input.js

Just another jQuery plugin for display a customizable toggle button next to the password field that allows to show/hide the password text entered by the user.

See also:

• jQuery Plugin For Previewing Password Field Values - Prevue
• jQuery Plugin To Mask/Unmask Password On Demand
• jQuery Plugin To Show Hidden Password In Password Field - inputShowPwd
• jQuery Plugin To Show / Hide Passwords - PassPeek
• Simple jQuery Plugin To Show Hidden Password - preventPassTypo
• Show/Hide Password Field Text with jQuery and Bootstrap
• Toggle Password Visibility With jQuery - hideShowPassword
• jQuery Plugin For Windows 8 Password Reveal Feature - Sauron

How to use it:

1. By default, the plugin uses Font Awesome 4 for the password visibility toggle icons.

<link rel="stylesheet" href="/path/to/font-awesome.min.css">

2. Create a password visibility toggle box next to the password field as displayed below:

<input type="password" class="password-box" value="password"> 
<div type="password" class="password-box" value="password"></div> 

3. Put both jQuery library and the password-toggle-inaut.js script at the end of the document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.password-toggle-input.js"></script>

4. Initialize the plugin and done.

$('.password-box').passwordToggleInput();

5. Apply your own CSS styles to the password visibility toggle box.

.password-toggle-input-container {
  position: relative;
  display: inline-block;
}

.password-toggle-input-container .password-toggle-input-button {
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
}

.password-toggle-input-container input {
  /** input style */
}

6. Default plugin options.

$('.password-box').passwordToggleInput({
  state: 'hide', // default state
  containerClass: 'password-toggle-input-container',
  toggleButtonClass: 'password-toggle-input-button',
  inputClass: 'password-toggle-input'
});

7. Use your own toggle icons:

$('.password-box').passwordToggleInput({
  iconClass: {
    show: 'fa fa-eye',
    hide: 'fa fa-eye-slash'
  }
});

---

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