Show And Hide Passwords Using jQuery - password-field.js

password-field.js is a lightweight and fast jQuery plugin that adds a password visibility toggle button to password fields, allowing users to display the password they've just typed in.

It works by using JS to switch between the types of input fields (type="password" & type="text") when clicking on the toggle button. Great for users who want to see what they're typing or for those who need to confirm that their caps lock isn't on before submitting the form.

How to use it:

1. Download the plugin and insert the jquery.password-field.js after jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.password-field.js"></script>

2. Add your password field together with a toggle button into a DIV container with the data-password-field attribute as follows:

<div class="field" data-password-field>
  <input type="password" class="input" placeholder="Enter your password">
  <div class="password-btn" data-password-field-btn><span>Show</span><span>Hide</span></div>
</div>

<div class="field" data-password-field>
  <input type="text" class="input" placeholder="Enter your password">
  <div class="password-btn" data-password-field-btn><span>Show</span><span>Hide</span></div>
</div>

...

3. Style the password visibility toggle button.

.password-btn {
  position: absolute; 
  top: 50%; 
  transform: translateY(-50%); 
  font-size: 14px; 
  font-weight: 600; 
  color: rgba(0, 0, 0, .75); 
  right: 20px; 
  cursor: pointer;
}

.password-btn > span:nth-child(2) { 
  display: none;
}

[data-password-shown] .password-btn > span:nth-child(1) {
  display: none;
}

[data-password-shown] .password-btn > span:nth-child(2) {
  display: block;
}

---

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