Header Ads Widget

Ticker

6/recent/ticker-posts

Mostrar y ocultar el campo de contraseña con jQuery y JavaScript

 En este tutorial, veremos cómo mostrar y ocultar el campo de contraseña con jQuery y JavaScript. Este tutorial demuestra la funcionalidad de cómo alternar la visibilidad del campo de entrada de contraseña. Ha visto en muchos sitios, la opción de visibilidad de contraseña significa que puede ver la contraseña mientras escribe. 


Este ejemplo le ayudará a entender cómo hacer visible la contraseña cuando escribe. Primero verificamos el tipo de atributo de entrada actual y si es contraseña, luego lo cambiamos a texto. si el atributo es texto, cámbielo a contraseña. Eso es.


Veamos el fragmento.

Recuento de caracteres en vivo mediante JavaScript

Usando jQuery

HTML

<div class = "contenedor">
      <h1> Mostrar y ocultar el campo de contraseña con jQuery </h1>
        <div class = "col-md-4">
            <div class = "form-group">
                <label> Nombre de usuario: </label>
                <input type = 'text' id = 'username' class = "form-control"> </div>

            <div class = "form-group">
                <label> Contraseña: </label>
                <input type = "password" id = "password" value = "demo" class = "form-control"> <span id = "toggle" class = "fa fa-fw fa-eye pass-icon"> </ span >
            </div>

        </div>
    </div> 

jQuery

<script>
// jquery
$ (documento) .ready (function () {

    $ ("# alternar"). haga clic en (función () {

        if ($ ("# contraseña"). attr ("tipo") == "contraseña")
        {
            // Cambiar atributo de tipo
            $ ("# contraseña"). attr ("tipo", "texto");
        } más
        {
            // Cambiar atributo de tipo
            $ ("# contraseña"). attr ("tipo", "contraseña");
        }
    });

});
</script> 

CSS

.pass-icono
            {
                flotar derecho;
                margen superior: -28px;
                posición: relativa;
                índice z: 5;
                tamaño de fuente: 20px;
            }

Usando JavaScript

HTML

<div class = "contenedor">
    <h1> Mostrar y ocultar el campo de contraseña con JavaScript </h1>
    <div class = "col-md-4">
        <div class = "form-group">
            <label> Nombre de usuario: </label>
            <input type = 'text' id = 'username' class = "form-control"> </div>

        <div class = "form-group">
            <label> Contraseña: </label>
            <input type = "password" id = "password" value = "demo" class = "form-control"> <span id = "toggle" class = "fa fa-fw fa-eye pass-icon" onclick = "showhide (); "> </span>
        </div>

    </div>
</div>

JavaScript

<script>
    function showhide () {

        var type = document.getElementById ("contraseña"). getAttribute ("tipo");

        if (escriba == "contraseña")
        {
            // Cambiar atributo de tipo
            document.getElementById ("contraseña"). setAttribute ("tipo", "texto");
        } más
        {
            // Cambiar atributo de tipo
            document.getElementById ("contraseña"). setAttribute ("tipo", "contraseña");
        }

    }
</script> 

CSS

.pass-icono
            {
                flotar derecho;
                margen superior: -28px;
                posición: relativa;
                índice z: 5;
                tamaño de fuente: 20px;
            }

Demo en vivo

Publicar un comentario

0 Comentarios