How to show and hide password by click on eye in ASP.NET C#

Question

0.00/5 (No votes)

See more:

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 18-Mar-21 1:48am

sameer_dev

Updated 11-Apr-21 23:26pm

Add a Solution

3 solutions

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>

Posted 9-Jan-24 12:16pm

Member 16179780

Updated 9-Jan-24 19:19pm

v3

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Andre Oosthuizen · Accepted Answer · 2021-03-18T04:15:00

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>

faina · Accepted Answer · 2021-04-11T23:26:00

Solution 2

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;
   });

Posted 11-Apr-21 23:26pm

faina

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

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

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