I have requirement to show and hide user password when click on eye icon so I had written script for that,when I click on eye icon only class is changing but password is not visible and again click on slash-eye icon it should hidden both these method not working how to solve this issue?
<input type="password" name="player_password" id="pass_log_id" />
<span toggle="#password-field" class="fa fa-fw fa-eye field_icon toggle-password"></span>
<script>
$("body").on('click','.toggle-password',function(){
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $("#pass_log_id").attr("type");
if (input.attr("type") === "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
</script>
Your input
is actually string. Check console, you should see that string does not have method attr()
because you assign $().attr()
to input
$("body").on('click', '.toggle-password', function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $("#pass_log_id");
if (input.attr("type") === "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span toggle="#password-field" class="fa fa-fw fa-eye field_icon toggle-password">Show/Hide</span>
<input type="password" id="pass_log_id"/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With