1

Tengo un login donde pongo un email y password, y cuando le doy el icono de ver/esconder password, se genera otra debajo.

introducir la descripción de la imagen aquí

Aquí tengo el codigo de html:

<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>

y en la parte del 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');
            });
        });
1
  • 1
    tu selector esta mal.
    – user46896
    el 19 ago. 2022 a las 18:06

1 respuesta 1

2

El problema es que estas aplicando los estilo con el selector del anchor <a>: $('#showPassword') lo cual es erroneo, cuando es al span de adentro es el que tienes que hacerle la asignacion del estilo:

asi es el selector que debes usar:

function mostrarPassword() {
    let cambio = document.getElementById("Password");
    let icon = $('#showPassword').children('span').first();
    if (cambio.type == "password") {
        cambio.type = "text";
        icon.removeClass('glyphicon glyphicon-eye-close').addClass('glyphicon glyphicon-eye-open');
    } else {
        cambio.type = "password";
        icon.removeClass('glyphicon glyphicon-eye-open').addClass('glyphicon glyphicon-eye-close');
    }
}

Otros selectores que tambien puede ser usados, dependiendo del ambito puedes implementar uno u otro:

    $('#showPassword> span:first')
    $('#showPassword> span:first-of-type')
    $('#showPassword> span:first-child')

2
  • Gracias!! me ayudo mucho
    – Luis
    el 19 ago. 2022 a las 18:10
  • @LuisUrias de nada nos suele pasar
    – user46896
    el 19 ago. 2022 a las 18:14

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.