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

Conoce los operadores unarios de JavaScript

Conoce los operadores unarios de JavaScript

Resumen: en este tutorial, aprenderás a usar operadores unarios de JavaScript que toman un solo operando y realizan una operación.

Ver artículo completo
Cómo abrir la consola de desarrollador de tu navegador

Cómo abrir la consola de desarrollador de tu navegador

Resumen: en este tutorial, aprenderás cómo abrir la Consola de las herramientas de desarrollo web.

Ver artículo completo
¿Cómo agregar un elemento a un array en JavaScript?

¿Cómo agregar un elemento a un array en JavaScript?

El método .push() de JavaScript agrega un elemento al final de una Array o arreglo. Después de agregar un elemento al final de la Array, y devuelve la nueva longitud de la matriz.

Ver artículo completo

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