
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>