ASP.NET C# में आंख पर क्लिक करके पासवर्ड कैसे दिखाएं और छिपाएं

नीचे दिए गए कोड से मैं उस आंख को देख सकता हूं लेकिन जब मैं उस पर क्लिक करता हूं तो पासवर्ड छिपकर नहीं दिखता… मेरी मदद करें?

मैंने क्या प्रयास किया है:

<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, बूटस्ट्रैप और एफए आइकन सीडीएन लिंक जोड़ें।

<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() {  
                //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 वर्किंग कोड का उपयोग किया था:

एचटीएमएल

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

समाधान 1

समाधान 2

समाधान 3

コメント