Skip to main content
Colocar código en snippet
Origen Enlace
jachguate
  • 32.1k
  • 8
  • 41
  • 69

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

Pero solo funciona 1una sola vez y no vuelve los inputs a type="password"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");
        }
        });
    });

// HTML
<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"></div>
                        </div>
                        </div>

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

Anduve haciendo un Toggle de mostrar y ocultar la contraseña de los inputs, tengo 2 inputs en el cual al darle al iconodiv class="icon icon-view" en los dos se muestre y oculte. Pero solo funciona 1 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");
        }
        });
    });

// HTML
<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"></div>
                        </div>
                        </div>

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>

se eliminaron 549 caracteres en el cuerpo; título editado
Origen Enlace

Problemas al usar attr y como generar un name ramdom (JqueryJQuery)

Anduve haciendo un Toggle de mostrar y ocultar la contraseña de los inputs, tengo 2 inputs en el cual al darle al iconodiv class="icon icon-view" en los dos se muestre y oculte. Pero solo funciona 1 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");
        }
        });
    });

// HTML
<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"></div>
                        </div>
                        </div>

Otra cosa que no tuve ideas de como hacerlo, es generar un nombre de usuario ramdom con el value del input type="email". ¿Alguna idea de cómo hacerlo?, thanks stackoverflow users :)

<input type="email" name="email" placeholder="Introduce tu correo electrónico..." autofocus required style="border:2px solid #FF8A38">
                        <!-- -->
                        <input type="text" name="username" placeholder="Introduce tu usuario..." required>

[![introducir la descripción de la imagen aquí][1]][1] [1]: https://i.sstatic.net/DHKfp.png

Problemas al usar attr y como generar un name ramdom (Jquery)

Anduve haciendo un Toggle de mostrar y ocultar la contraseña de los inputs, tengo 2 inputs en el cual al darle al iconodiv class="icon icon-view" en los dos se muestre y oculte. Pero solo funciona 1 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");
        }
        });
    });

// HTML
<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"></div>
                        </div>
                        </div>

Otra cosa que no tuve ideas de como hacerlo, es generar un nombre de usuario ramdom con el value del input type="email". ¿Alguna idea de cómo hacerlo?, thanks stackoverflow users :)

<input type="email" name="email" placeholder="Introduce tu correo electrónico..." autofocus required style="border:2px solid #FF8A38">
                        <!-- -->
                        <input type="text" name="username" placeholder="Introduce tu usuario..." required>

[![introducir la descripción de la imagen aquí][1]][1] [1]: https://i.sstatic.net/DHKfp.png

Problemas al usar attr (JQuery)

Anduve haciendo un Toggle de mostrar y ocultar la contraseña de los inputs, tengo 2 inputs en el cual al darle al iconodiv class="icon icon-view" en los dos se muestre y oculte. Pero solo funciona 1 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");
        }
        });
    });

// HTML
<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"></div>
                        </div>
                        </div>
Origen Enlace

Problemas al usar attr y como generar un name ramdom (Jquery)

Anduve haciendo un Toggle de mostrar y ocultar la contraseña de los inputs, tengo 2 inputs en el cual al darle al iconodiv class="icon icon-view" en los dos se muestre y oculte. Pero solo funciona 1 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");
        }
        });
    });

// HTML
<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"></div>
                        </div>
                        </div>

Otra cosa que no tuve ideas de como hacerlo, es generar un nombre de usuario ramdom con el value del input type="email". ¿Alguna idea de cómo hacerlo?, thanks stackoverflow users :)

<input type="email" name="email" placeholder="Introduce tu correo electrónico..." autofocus required style="border:2px solid #FF8A38">
                        <!-- -->
                        <input type="text" name="username" placeholder="Introduce tu usuario..." required>

[![introducir la descripción de la imagen aquí][1]][1] [1]: https://i.sstatic.net/DHKfp.png