【解決方法】ASP.NET C#で目をクリックしてパスワードを表示および非表示にする方法

[ad_1]

以下のコードにより、その目は表示されますが、それをクリックすると、パスワードは非表示と表示になりません…助けてください?

私が試したこと：

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

解決策 1
解決策 2
解決策 3

解決策 1

あなたはほぼ正しい軌道に乗っています – 以下のコードはから取得されていますここ

jQuery、ブートストラップ、および fa icon cdn リンクを 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>

JavaScript を記述して、パスワードを非表示にしたり表示したりする関数を作成します。

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

以下のように、テキストボックスコントロール、チェックボックスコントロール、ボタンコントロールをドラッグアンドドロップして HTML をデザインします。

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

解決策 2

少し前に、私はこの 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;
   });

解決策 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>