How can I achieve an interactive icon effect within an input field? Specifically, when hovering over the icon, I want it to change and also alter the "type" attribute of the targeted input field among three similar fields.
Here's the HTML structure:
<div class="change_subtitle">Enter Password</div>
<input id="pw_old" class="change_input" type="text"><i class="fa fa-eye-slash" aria-hidden="true"></i></input>
<div class="change_subtitle">Enter new Password</div>
<input id="pw_new1" class="change_input" type="password"><i class="fa fa-eye-slash" aria-hidden="true"></i></input>
<div class="change_subtitle">Confirm new Password</div>
<input id="pw_new2" class="change_input" type="password"><i class="fa fa-eye-slash" aria-hidden="true"></i></input>
<div class="button_confirm" onclick="inputIsValid()">Confirm</div>The jQuery implementation for this functionality is as follows:
$(".fa-eye-slash").hover(function(){
if($(this).hasClass('fa-eye-slash')) {
$(this).removeClass('fa-eye-slash');
$(this).addClass('fa-eye');
$(this).attr('type' = 'text'); // Update the input field type
} else if($(this).hasClass('fa-eye')) {
$(this).removeClass('fa-eye');
$(this).addClass('fa-eye-slash');
$(this).attr('type' = 'password'); // Revert back to password type
}
})To further understand how the icon relates to the inputs, here is a snippet of the CSS code:
.fa-eye-slash{
color: #34495e;
margin-left: -20px;
}
.fa-eye{
color: #34495e;
margin-left: -20px;
}When interacting with the icon, it should dynamically switch the input field type between "password" and "text".