Mostrar y ocultar la contraseña mediante jQuery en ASP.NET

Estrada Web Group
Administrador
Mostrar y ocultar la contraseña mediante jQuery en ASP.NET

Mostrar u ocultar password con jquery y asp.net

En este articulo veremos cómo crear un botón para mostrar y ocultar la contraseña usando jQuery en ASP.NET.

Al hacer clic en la casilla de verificación o al colocar el mouse sobre el ícono, podemos hacer que la contraseña sea visible.

Primero crea un nuevo proyecto en Visual Studio y elije con una plantilla vacía. Después agrega un formulario web al proyecto. Haz clic derecho y elija un nuevo elemento, seleccione el formulario web y asígnale un nombre.

Agrega las referencias de jQuery, bootstrap y fa icon a la sección principal.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Agrega el siguiente JavaScript para ocultar y mostrar la contraseña.

$(document).ready(function () {
            $('#show_password').hover(function show() {
                //Cambiar el atributo a texto
                $('#txtPassword').attr('type', 'text');
                $('.icon').removeClass('fa fa-eye-slash').addClass('fa fa-eye');
            },
            function () {
                //Cambiar el atributo a contraseña
                $('#txtPassword').attr('type', 'password');
                $('.icon').removeClass('fa fa-eye').addClass('fa fa-eye-slash');
            });
            //CheckBox mostrar contraseña
            $('#ShowPassword').click(function () {
                $('#Password').attr('type', $(this).is(':checked') ? 'text' : 'password');
            });
        });

Aquí está el código completo para ocultar y mostrar la contraseña.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ShowHidePassword.aspx.cs" Inherits="JQueryShowHidePassword_Demo.ShowHidePassword" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Mostrar u ocultar contraseña</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#show_password').hover(function show() {
                //Cambiar el atributo a texto
                $('#txtPassword').attr('type', 'text');
                $('.icon').removeClass('fa fa-eye-slash').addClass('fa fa-eye');
            },
            function () {
                //Cambiar el atributo a contraseña
                $('#txtPassword').attr('type', 'password');
                $('.icon').removeClass('fa fa-eye').addClass('fa fa-eye-slash');
            });
            //CheckBox mostrar contraseña
            $('#ShowPassword').click(function () {
                $('#Password').attr('type', $(this).is(':checked') ? 'text' : 'password');
            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div class="container">
            <h2>Mostrar u ocultar contraseña</h2>
            <div class="row">
                <div class="col-md-6">
                    <p>Desplácese por el ojo para mostrar / ocultar la contraseña</p>
                    <label>Contraseña</label>
                    <div class="input-group">
                        <asp:TextBox ID="txtPassword" TextMode="Password" runat="server" CssClass="form-control"></asp:TextBox>
                        <div class="input-group-append">
                            <button id="show_password" class="btn btn-primary" type="button">
                                <span class="fa fa-eye-slash icon"></span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <p>Verificar para mostrar / ocultar la contraseña</p>
                    <label>Contraseña</label>
                    <div class="input-group">
                        <asp:TextBox ID="Password" TextMode="Password" runat="server" CssClass="form-control"></asp:TextBox>
                        <div class="input-group-append">
                            <span class="input-group-text">
                                <asp:CheckBox ID="ShowPassword" runat="server" CssClass="checkbox" />
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </form>
</body>
</html>

 

Compartir artículo:

Más artículos geniales

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla ;