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>

 

Artículos relacionados
¿Cómo eliminar etiquetas HTML de una cadena de texto con JavaScript?
¿Cómo eliminar etiquetas HTML de una cadena de texto con JavaScript?

En el artículo anterior vimos ¿Cómo eliminar

Cómo validar numéricos en un TextBox con JavaScript o JQuery
Cómo validar numéricos en un TextBox con JavaScript o JQuery

En este artículo te mostrare cómo validar que

Cómo exporte datos de tablas HTML a Excel, CSV, PNG y PDF con jQuery
Cómo exporte datos de tablas HTML a Excel, CSV, PNG y PDF con jQuery

Exportar datos a Excel, pdf, entre otros forma

0 Comentarios
Enviame un comentario