jQuery Toggle Password Plugin is a lightweight jQuery plugin that allows users to toggle the visibility of password fields in web forms with a single click.
- Easily toggle password visibility for password input fields.
- Customizable icons for show/hide states.
- Simple integration into existing web forms.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="toggle-password.js"></script>
<link rel="stylesheet" href="toggle-password.css">
- Add the necessary HTML for your password input fields and include Font Awesome for icons (if not already included):
<input type="password" class="toggle-password" id="password" placeholder="Password">
- Call the plugin on the password input fields:
$('.toggle-password').togglePassword({
show: 'fa-eye',
hide: 'fa-eye-slash',
base: 'fa fa-fw toggle-password-button'
});
The plugin supports the following options:
show
(string): The Font Awesome class for the icon to show the password (default: 'fa-eye').hide
(string): The Font Awesome class for the icon to hide the password (default: 'fa-eye-slash').base
(string): Additional classes for the toggle button (default: 'fa fa-fw toggle-password-button').
Contributions are welcome! If you have any suggestions, improvements, or bug fixes, please feel free to open an issue or create a pull request.
This project is licensed under the MIT License - see the LICENSE file for details.