Click here to Skip to main content
15,441,149 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
By below code i can see that eye but when i click on it then password is not hide and show...help me ?

What I have tried:

<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>
Posted
Updated 11-Apr-21 23:26pm

You are almost on the right track - below code is obtained from HERE

Add jQuery, bootstrap, and fa icon cdn links to the head section.
<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>


Write JavaScript and function to hide and show the password.
<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>  


Design HTML by dragging and dropping textbox control, checkbox control, and button control as given below.
<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>
 
Share this answer
 
Comments
sameer_dev 27-Sep-21 2:31am    
thanks andre!
Time ago I used this html jQuery working code:

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;
   });
 
Share this answer
 
Comments
Richard Deeming 12-Apr-21 6:02am    
Which is practically the same as solution 1. Except you're using a submit button to toggle the display, which is semantically incorrect, and will fail if Javascript is disabled for any reason.
faina 12-Apr-21 6:38am     CRLF
yes, you are right, but the submit can be not used; I posted the fragment because it contains only the relevant part and is much more simple to understand. Use only
<input id="pwd" type="password"/><input class="btneye" id="btntoggle" value="__s" />
Richard Deeming 12-Apr-21 6:43am     CRLF
If Javascript is enabled then the submit cannot be used. If the user has disabled Javascript, or is using a browser which does not support Javascript, then clicking the "toggle" button will submit the form. If the user is using a screen reader, or other assistive technology, then your toggle button will be announced as a submit button, which will confuse them.
faina 12-Apr-21 7:15am    
It seems that the user is ok using javascript, anyway can you supply us with the correct solution?
sameer_dev 27-Sep-21 2:30am    
Thanks you very much

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900