Refactored: works for multiple password inputs, fixes regarding autofill…

.gitignore

@@ -10,4 +10,4 @@ Thumbs.db
 
 # Files
 package-lock.json
-npm-debug.log
+npm-debug.log

CHANGELOG.md

@@ -0,0 +1,19 @@
+## Changes
+
+### [1.3.3] - 2021-11-06
+- Fixes problem with the toggle button by adding the attribute `type="button"` to the jQuery version of the script.
+
+### [1.3.2] - 2021-11-06
+- Added script working with jQuery or Cash.
+
+### [1.3.1] - 2021-10-31
+- Fixes the problem that autofill hides the toggle icon.
+- Added the `aria-pressed` attribute.
+- Updated the demos ([Bootstrap 4](https://coliff.github.io/bootstrap-show-password-toggle/tests/bootstrap4-sign-in/), [Bootstrap 5](https://coliff.github.io/bootstrap-show-password-toggle/tests/bootstrap5-sign-in/))
+
+### [1.3.0] - 2021-10-30
+- Works with multiple `input[type=password]`.
+- The `aria-label` of the toggle button can be customized adding `data-show` and `data-hide` attributes to the password input.
+- The toggle button is added by JavaScript, remove existing `<button>` tags.
+- The toggle button works more stable.
+- The toggle button is always visible.

README.md

@@ -33,22 +33,25 @@ A show password as text toggle for Bootstrap forms
 
 ```html
 <div class="input-group">
-  <input type="password" class="form-control rounded" required>
-  <button id="toggle-password" type="button" class="d-none"
-    aria-label="Show password as plain text. Warning: this will display your password on the screen.">
-  </button>
+  <input type="password"
+         class="form-control rounded"
+         required
+         data-show="Show password as plain text."
+         data-hide="Hide password."
+  >
 </div>
 ```
 
-3. Load the `show-password-toggle.js` after the form
+3. Load the `show-password-toggle.min.js` after the form
 
-I highly recommend adding the attributes: `spellcheck="false"`, `autocorrect="off"` and `autocapitalize="off"` to the password input so that when the password is displayed in plain text the input is not auto-corrected, capitalized or spellchecked (to avoid red squiggly line underneath).
+I highly recommend adding the attributes: `spellcheck="false"` and `autocapitalize="off"` to the password input so that when the password is displayed in plain text the input is not auto-corrected, capitalized or spellchecked (to avoid red squiggly line underneath).
 
-You should also add `name="current-password"` and `autocomplete="current-password"` to help browsers autocomplete the form.
+You should also add `id="current-password"` and `autocomplete="current-password"` to help browsers autocomplete the form.
 
 ## Demo
 
 - [Bootstrap 4 Demo](https://coliff.github.io/bootstrap-show-password-toggle/tests/bootstrap4-sign-in/)
+- [Bootstrap 4 Demo with jQuery](https://coliff.github.io/bootstrap-show-password-toggle/tests/bootstrap4-jquery-sign-in/)
 - [Bootstrap 5 Demo](https://coliff.github.io/bootstrap-show-password-toggle/tests/bootstrap5-sign-in/)
 
 ## Browser Support
@@ -63,8 +66,7 @@ A. You could change the icon displayed by replacing the `.input-password[type="p
 
 ## Known Issues
 
-- If the browser autofills the password input then the user-agent will apply `background-image: none !important`.
-- The password input requires the use of the `required` attribute. This is so the background-image is not displayed when the input is empty. (It'd be great if browsers supported the [:blank](https://developer.mozilla.org/en-US/docs/Web/CSS/:blank) or [:empty](https://developer.mozilla.org/en-US/docs/Web/CSS/:empty) pseudo-selectors!)
+- For browsers without [Element.after()](https://developer.mozilla.org/en-US/docs/Web/API/Element/after#browser_compatibility) load `show-password-toggle-jquery.min.js` instead. jQuery or Cash needs to be loaded before.
 
 ## Credits and Thanks