Looking for assistance in creating a password text box with an eye icon that toggles visibility. When the user clicks on the eye icon, it should change to a crossed-out eye icon and switch the input type to text.
<div class="input-group show-hide-password">
<form:password id="form-control" path="password" class="form-control" required="" />
<div class="input-group-append">
<span id="PassSpan" class="input-group-text" onclick="typeChange('form-
control','PassSpan')">
<i class="fa fa-eye" aria-hidden="true"></i>
</span>
</div>
</div>
Javascript function:
function typeChange(controlId, spanId) {
var x = document.getElementById(controlId);
if (x.type === "password")
{ x.type = "text";
}
else {
x.type = "password";
}
}
I have successfully implemented the input type change functionality, but I am struggling to also change the class to 'fa fa-eye-slash' for the icon within the span element. The classes are defined in the CSS file, but I am unsure how to dynamically update the class of the HTML element.
If anyone has a solution for this, I would greatly appreciate your help.