Mostrar y ocultar la contraseña mediante jQuery en 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>

Estrada WebGroup