I have a login where I put an email and password, and when I give it the icon to see/hide password, another one is generated below.
Here I have the html code:
<div class="form-group has-feedback">
@Html.PasswordFor(m => m.Password, new { @class = "form-control", type = "password", placeholder =
"Password" })
@Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })
<a href="#" id="showPassword" class="form-control-feedback" onclick="mostrarPassword()" style="pointer-events: all;">
<span class="glyphicon glyphicon-eye-close"></span>
</a>
</div>
and in the part of the query.
function mostrarPassword() {
var cambio = document.getElementById("Password");
if (cambio.type == "password") {
cambio.type = "text";
$('#showPassword').removeClass('glyphicon glyphicon-eye-close').addClass('glyphicon glyphicon-eye-open');
} else {
cambio.type = "password";
$('#showPassword').removeClass('glyphicon glyphicon-eye-open').addClass('glyphicon glyphicon-eye-close');
}
}
$(document).ready(function () {
//CheckBox mostrar contraseña
$('#ShowPassword').click(function () {
$('#Password').attr('type', $(this).is(':checked') ? 'text' : 'password');
});
});
The problem is that you are applying the styles with the anchor selector
<a>
:$('#showPassword')
which is wrong, when it is the inside span that you have to assign the style to:This is the selector you should use:
Other selectors that can also be used, depending on the scope you can implement one or the other: