Comment afficher et masquer le mot de passe en cliquant sur l’œil dans ASP.NET C#

Grâce au code ci-dessous, je peux voir cet œil, mais lorsque je clique dessus, le mot de passe n’est pas masqué et affiché… aidez-moi ?

Ce que j’ai essayé :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<body>
   
<asp:TextBox ID="txtPassword" runat="server" ValidationGroup="a" TextMode="Password" CssClass="form-control-sm"></asp:TextBox>
    <span id="toggle_pwd" class="fa fa-fw fa-eye field_icon"></span>

    <script type="text/javascript">
        $(function () {
            $("#toggle_pwd").click(function () {
                $(this).toggleClass("fa-eye fa-eye-slash");
                var type = $(this).hasClass("fa-eye-slash") ? "text" : "password";
                $("#txtPassword").attr("type", type);
            });
        });
    </script>
</body>

Solution 1
Solution 2
Solution 3

Solution 1

Vous êtes presque sur la bonne voie – le code ci-dessous est obtenu à partir de ICI

Ajoutez des liens cdn jQuery, bootstrap et fa icon à la section head.

<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>

Écrivez du JavaScript et une fonction pour masquer et afficher le mot de passe.

<script type="text/javascript">  
        $(document).ready(function () {  
            $('#show_password').hover(function show() {  
                //Change the attribute to text  
                $('#txtPassword').attr('type', 'text');  
                $('.icon').removeClass('fa fa-eye-slash').addClass('fa fa-eye');  
            },  
            function () {  
                //Change the attribute back to password  
                $('#txtPassword').attr('type', 'password');  
                $('.icon').removeClass('fa fa-eye').addClass('fa fa-eye-slash');  
            });  
            //CheckBox Show Password  
            $('#ShowPassword').click(function () {  
                $('#Password').attr('type', $(this).is(':checked') ? 'text' : 'password');  
            });  
        });  
    </script>

Concevez du HTML en faisant glisser et en déposant le contrôle de zone de texte, le contrôle de case à cocher et le contrôle de bouton comme indiqué ci-dessous.

<body>  
    <form id="form1" runat="server">  
        <div class="container">  
            <h2>Show or Hide Password</h2>  
            <div class="row">  
                <div class="col-md-6">  
                    <p>Hover on the eye to show/hide the password</p>  
                    <label>Password</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">  
                                  
                            </button>  
                        </div>  
                    </div>  
                </div>  
                <div class="col-md-6">  
                    <p>Check to show/hide the password</p>  
                    <label>Password</label>  
                    <div class="input-group">  
                        <asp:TextBox ID="Password" TextMode="Password" runat="server" CssClass="form-control"></asp:TextBox>  
                        <div class="input-group-append">  
                              
                                <asp:CheckBox ID="ShowPassword" runat="server" CssClass="checkbox" />  
                              
                        </div>  
                    </div>  
                </div>  
            </div>  
        </div>  
    </form>  
</body>

Solution 2

Il y a quelque temps, j’ai utilisé ce code de travail html jQuery :

HTML

<input id="pwd" type="password"/><input class="btneye" id="btntoggle" type="submit" value="__s" />

<script type="text/javascript" language="JavaScript">
   $('.clickme').click(function() {
   btn_actual=$('#btntoggle').val();
   if (btn_actual=='__s'){
       $('#btntoggle').val($('#btntoggle').val().replace('__s','__h'));
       $('#btntoggle').css('background-image','url(img/eyeoff.png)');
       $('#pwd').attr('type','text');
     }
   else
   {
       $('#btntoggle').val($('#btntoggle').val().replace('__h','__s'));
       $('#btntoggle').css('background-image','url(img/eyeon.png)');
       $('#pwd').attr('type','password');
     }
       return false;
   });

Solution 3

<asp:TextBox runat="server" ID="Password" TextMode="Password" CssClass="form-control" />
<span style="cursor:pointer" onclick="javascript:togglePassword(MainContent_Password)"></span> 

<script>
    function togglePassword(obj) {
        obj.type = obj.type == 'password' ? 'text' : 'password';
    }
</script>