2

Anduve haciendo un toggle de mostrar y ocultar la contraseña de los inputs; tengo 2 inputs en el cual al darle al icono div class="icon icon-view", en los dos se muestre y oculte.

Pero solo funciona una sola vez y no vuelve los inputs a type="password".

$(document).ready(function() {
	$("#view").click(function() {
		$(this).toggleClass("icon-view-active");
     	if ($(":password").attr("type","password")){
      		$(':password').attr("type", "text");
      	}
      	else{
      		$(':password').attr("type", "password");
      	}
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-float">
  <input type="password" name="password" placeholder="Introduce tu contraseña..." required>
  <!-- -->
  <div class="password-verify">
    <input type="password" name="password_verify" placeholder="Introduce tu contraseña..."required>
    <div class="icon icon-view" id="view">clic aqui</div>
  </div>
</div>

4 respuestas 4

2

Uno de los problemas radican en el selector que estás utilizando en jQuery. $(":password" va a devolverte todos los inputs cuyo tipo sea "password", por eso funciona la primera vez. Luego, ya no tendrán ese tipo y el selector devuelve un conjunto de resultados vacío.

Una forma de solucionarlo es ponerles a todos una clase particular, que te permita luego seleccionarlos, por ejemplo, la clase "pwd", y utilizar el selector de clase ".pwd" en jQuery.

El otro problema que tienes es que en el if no estás comparando el atributo, sino asignándolos.

Al juntar ambas cosas, tenemos el código de esta forma:

$(document).ready(function() {
	$("#view").click(function() {
    if ($(".pwd").attr("type")=="password") {
      $(".pwd").attr("type", "text");
    } else {
      $(".pwd").attr("type", "password");
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-float">
  <input class="pwd" type="password" name="password" placeholder="Introduce tu contraseña..." required>
  <!-- -->
  <div class="password-verify">
    <input class="pwd" type="password" name="password_verify" placeholder="Introduce tu contraseña..."required>
    <div class="icon icon-view" id="view">clic aqui</div>
  </div>
</div>

0

cuando pones:

if($(":password").attr("type","password")) // aqui no estas preguntando si el type de tu input es password, en lugar de esto se lo estas asignando.

es por esa razon que solo ocurre una vez, porque el retorna true, que significa que si asigno type = password al input deseado y despues le dirige el type a ser text, y queda en un bucle infinito, ya que la condicional es en palabras: "se agrego password como type a :password? a lo que siempre retornara como true.

mejor pon :

if($(":password").attr("type") == "password") // asi se comprobara que type corresponde a password
0

La razón por la que solo funciona una vez es porque buscas inputs del tipo password $(":password").attr("type","password") y en la segunda vez pues ya no son tipo password sino text, sin mencionar que no haces una comparación del atributo type, lo más fácil es ponerles una clase y operar sobre ella así:

$("#view").click(function() {
    $(this).toggleClass("icon-view-active");
    if ($(".clase").attr("type") == "password"){
        $('.clase').attr("type", "text");
    }
    else{
        $('.clase').attr("type", "password");
    }
    });

<div class="form-float">
 <input type="password" name="password" placeholder="Introduce tu contraseña..." required class="clase">
 <div class="password-verify">
      <input type="password" name="password_verify" placeholder="Introduce tu contraseña..."required class="clase">
      <div class="icon icon-view" id="view">VER</div>
 </div>

Lo del usuario hay varias formas, básicamente todas concuerdan en hacer un corte del mail en el "@"(sin incluirlo) y concatenarlo al número aleatorio.

Para el número existe Math.random(), solo regresa un número entre 0 y 1(nunca regresara a) así que deberás de hacer el ajuste correspondiente, por ejemplo:

Math.floor((Math.random() * 100) + 1);//Número entre 1 y 100

Otra manera es hacer un conteo de usuarios con ese username, sin el número, registrados en la base de datos y concatenar ese número.

Espero sea de ayuda :)

0

Podrías hacerlo así:

$(document).ready(function() {
  $("#view").click(function() {
    $(this).toggleClass("icon-view-active");
    $('input').attr("type", $('input').attr('type') === 'text' ? 'password' : 'text' )
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-float">
  <input type="password" name="password" placeholder="Introduce tu contraseña..." required>
  <!-- -->
  <div class="password-verify">
    <input type="password" name="password_verify" placeholder="Introduce tu contraseña..."required>
    <div class="icon icon-view" id="view">clic aqui</div>
  </div>
</div>

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.