Toggle Password
Show or hide password field.
How to use
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="./assets/vendor/hs-toggle-password/dist/js/hs-toggle-password.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
(function() {
// INITIALIZATION OF TOGGLE PASSWORD
// =======================================================
new HSTogglePassword('.js-toggle-password')
})();
</script>
Basic example
<div class="d-flex justify-content-between align-items-center">
<label class="form-label" for="signupSimpleLoginPassword">Password</label>
</div>
<div class="input-group input-group-merge" data-hs-validation-validate-class>
<input type="password" class="js-toggle-password form-control form-control-lg" name="password" id="signupSimpleLoginPassword" placeholder="8+ characters required" aria-label="8+ characters required" required minlength="8"
data-hs-toggle-password-options='{
"target": "#changePassTarget",
"defaultClass": "bi-eye-slash",
"showClass": "bi-eye",
"classChangeTarget": "#changePassIcon"
}'>
<a id="changePassTarget" class="input-group-append input-group-text" href="javascript:;">
<i id="changePassIcon" class="bi-eye"></i>
</a>
</div>
<span class="invalid-feedback">Please enter a valid password.</span>
With Checkbox
<!-- Form -->
<div class="mb-4">
<label for="currentPasswordLabel" class="form-label">Current password</label>
<input type="password" class="js-toggle-password form-control" id="currentPasswordLabel" placeholder="Enter password" value="TH6R95E9LsdT"
data-hs-toggle-password-options='{
"target": "#changePasswordToggleCheckboxEg"
}'>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-4">
<label for="newPasswordLabel" class="form-label">New password</label>
<input type="password" class="js-toggle-password form-control" id="newPasswordLabel" placeholder="Enter password"
data-hs-toggle-password-options='{
"target": "#changePasswordToggleCheckboxEg"
}'>
</div>
<!-- End Form -->
<div class="mb-4">
<!-- Check -->
<div class="form-check">
<input type="checkbox" id="changePasswordToggleCheckboxEg" class="form-check-input">
<label class="form-check-label" for="changePasswordToggleCheckboxEg">Show password</label>
</div>
<!-- End Check -->
</div>
Show default
<label for="showPasswordLabel" class="form-label">Password</label>
<div class="input-group input-group-merge">
<input type="password" class="js-toggle-password form-control" id="showPasswordLabel" placeholder="Enter password" value="TH6R95E9LsdT"
data-hs-toggle-password-options='{
"target": ".js-password-toggle-show-target",
"show": true,
"defaultClass": "bi-eye-slash",
"showClass": "bi-eye",
"classChangeTarget": "#changePasswordShowIcon"
}'>
<a class="js-password-toggle-show-target input-group-append input-group-text" href="javascript:;">
<i id="changePasswordShowIcon"></i>
</a>
</div>
Multi toggle
<!-- Form -->
<div class="w-sm-50 mb-4">
<label class="multiTogglePasswordLabel">Current password</label>
<div class="input-group input-group-merge">
<input type="password" class="js-toggle-password form-control" id="multiToggleCurrentPasswordLabel" placeholder="Enter password" value="TH6R95E9LsdT"
data-hs-toggle-password-options='{
"target": [".js-change-password-multi-1", ".js-change-password-multi-2"],
"defaultClass": "bi-eye-slash",
"showClass": "bi-eye",
"classChangeTarget": "#showMultiPassIcon1"
}'>
<a class="js-change-password-multi-1 input-group-append input-group-text" href="javascript:;">
<i id="showMultiPassIcon1"></i>
</a>
</div>
</div>
<!-- End Form -->
<!-- Form -->
<div class="w-sm-50">
<label class="multiToggleNewPasswordLabel">New password</label>
<div class="input-group input-group-merge">
<input type="password" class="js-toggle-password form-control" id="multiToggleNewPasswordLabel" placeholder="Enter password" value="TH6R95E9LsdT"
data-hs-toggle-password-options='{
"target": [".js-change-password-multi-1", ".js-change-password-multi-2"],
"defaultClass": "bi-eye-slash",
"showClass": "bi-eye",
"classChangeTarget": "#showMultiPassIcon2"
}'>
<a class="js-change-password-multi-2 input-group-append input-group-text" href="javascript:;">
<i id="showMultiPassIcon2"></i>
</a>
</div>
</div>
<!-- End Form -->
Modal example
Toggle Password
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Open modal</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Toggle Password</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<!-- Form -->
<label for="passwordModalEgLabel" class="form-label">Password</label>
<div class="input-group input-group-merge">
<input type="password" class="js-toggle-password form-control" id="passwordModalEgLabel" placeholder="Enter password" value="TH6R95E9LsdT"
data-hs-toggle-password-options='{
"target": ".js-password-toggle-target-modal-eg",
"defaultClass": "bi-eye-slash",
"showClass": "bi-eye",
"classChangeTarget": "#changePassIconModalEg"
}'>
<a class="js-password-toggle-target-modal-eg input-group-append input-group-text" href="javascript:;">
<i id="changePassIconModalEg"></i>
</a>
</div>
<!-- End Form -->
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
Methods
| Parameters | Description | Default value |
|---|---|---|
target
|
The element when clicked on which the password will be shown or hidden. |
null
|
classChangeTarget
|
The element when showing or hiding the password will be changed class. |
null
|
defaultClass
|
The class to be added by default to classChangeTarget. |
null
|
showClass
|
The class to be added when passowrd is show to classChangeTarget. |
null
|
show
|
Show password by default. |
false
|