2

Estoy intentando que un Input muestre y oculte contraseña con JavaScript, y al mismo tiempo que se abra y cierre el ojo. El problema que tengo es que una vez que muestro la contraseña, no puedo regresar a que no se vuelva a mostrar al seleccionar que la oculte (Ojo cerrado o fa-eye-slash).

¿Cuál podría ser el problema?

Comparto el código:

$(document).ready(function() {
    $('.navbutton').click(function () {
        var control = $(this);
        var estatus = control.data('activo');
        $(this).find('.fa-eye,.fa-eye-slash').toggleClass('fa-eye  ').toggleClass('fa-light fa-eye-slash');
        if (estatus == true) {
            $("#password").attr('type', 'password');                
        }
        else {
            $("#password").attr('type', 'text');              
        }
    });
});
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/4d529f15e3.js" crossorigin="anonymous"></script>

<input id="password" type="password" placeholder="Escribe tu contraseña"  />
<p class="navbutton" data-activo="false" >
    <i class="fa fa-light fa-eye fa-2x " >
    </i> 
</p> 

2 respuestas 2

1

Te comparto el siguiente ciclo de cambio (true -false) con un switch y la variable "estatus" la debes ocupar como un string ya que así la definiste en el data-activo

    $('.navbutton').click(function () {
        var control = $(this);
        var estatus = $(this).attr("data-activo");


        //ciclo de cambio activo al haber algún valor ingresado
        if($("#password").val() != ""){

        switch (estatus) {
            case "true":
            $(this).attr("data-activo",false);
            console.log(estatus)
                break;

            case "false":
            $(this).attr("data-activo",true);
            console.log(estatus)
                break;

            default:
                break;
        }

        $(this).find('.fa-eye,.fa-eye-slash').toggleClass('fa-eye  ').toggleClass('fa-light fa-eye-slash');
        //tipo string
        if (estatus == "true") {
            $("#password").attr('type', 'password');
        }
        else {
            $("#password").attr('type', 'text');
        }

    }
    });
0

Siempre es importante saber cual es el valor de tus variables.


Hagamos un console.log() a tu variable estatus para ver qué valor tiene cada vez que hagamos clic a tu ícono:

$(document).ready(function() {
  $('.navbutton').click(function () {
    var control = $(this);
    var estatus = control.data('activo');
    console.log(estatus);
    $(this).find('.fa-eye,.fa-eye-slash').toggleClass('fa-eye  ').toggleClass('fa-light fa-eye-slash');
    if (estatus == true) {
      $("#password").attr('type', 'password');
    }
    else {
      $("#password").attr('type', 'text');
    }
  });
});
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/4d529f15e3.js" crossorigin="anonymous"></script>

<input id="password" type="password" placeholder="Escribe tu contraseña"  />
<p class="navbutton" data-activo="false">
  <i class="fa fa-light fa-eye fa-2x "></i> 
</p> 

Si te das cuenta, el valor de tu variable siempre es false, por la cual siempre está ingresando al else, cambiando el atributo de tu input a texto, o sea, esto se debe a que el valor de tu variable nunca cambia.


Entonces, se me ocurre cambiar el valor de la variable cada vez que le hagamos clic al ícono, así indicamos que el valor va a actualizarse cada vez que se ingrese al evento. Entonces, podemos agregar esto al final del evento para que el valor se actualice cada vez que entre a tu evento:

control.data('activo', !estatus);

Para que se entienda mejor qué hace esto, te doy un ejemplo: Mira que al principio, tu valor es false y entra al else, luego cambio ese valor a true, diciendo que la siguiente vez que ingrese al evento será true (porque lo cambié a true antes) y así entra al if, y luego ese true se cambia a false, e indico que en la siguiente será false y así entra al else, sucesivamente (espero me logre entender).

Código:

$(document).ready(function() {
  $('.navbutton').click(function () {
    var control = $(this);
    var estatus = control.data('activo');
    console.log(estatus);
    $(this).find('.fa-eye,.fa-eye-slash').toggleClass('fa-eye  ').toggleClass('fa-light fa-eye-slash');
    if (estatus == true) {
      $("#password").attr('type', 'password');
    }
    else {
      $("#password").attr('type', 'text');
    }
    control.data('activo', !estatus);
  });
});
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/4d529f15e3.js" crossorigin="anonymous"></script>

<input id="password" type="password" placeholder="Escribe tu contraseña"  />
<p class="navbutton" data-activo="false">
  <i class="fa fa-light fa-eye fa-2x "></i> 
</p> 

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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