mithilesh kumar singh

Show And Hide Password Using jQuery In ASP.NET

  <div class="panel-body">

                                <form role="form">

                                    <div style="margin-bottom: 12px" class="input-group">

                                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>

                                        <input id="txtUName" type="text" class="form-control"name="username" value="" placeholder="User Name or email">

                                    </div>

                         

                                    <div class="input-group">

                                        <div style="margin-bottom: 12px" class="input-group">

                                            <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>

                                            <input id="txtSPassword" type="password" class="form-control" ng-model="password" name="password" placeholder="password">

                                            <div class="input-group-append">

                                                <button id="show_password" class="btn btn-primary" type="button">

                                                    <span class="fa fa-eye-slash icon"></span>

                                                </button>

                                            </div>

                                        </div>

                                    </div>  

                                    <span id="spnSPassword" class="error">Password is required</span>

                                    <div class="input-group">

                                        <div class="checkbox" style="margin-top: 0px;">

                                            <label>

                                                <input id="loginSeeker-remember" type="checkbox" name="remember" value="1"> Remember me

                                            </label>

                                        </div>

                                    </div>

                                 

                                    <input type="button" class="btn btn-primary" id="btnSign" value="Sign In" />

                                 

                                </form>

                            </div>

<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() {

                $('#txtSPassword').attr('type', 'text');

                $('.icon').removeClass('fa fa-eye-slash').addClass('fa fa-eye');

            },

            function show() {

                $('#txtSPassword').attr('type', 'password');

                $('.icon').removeClass('fa fa-eye').addClass('fa fa-eye-slash');

            });

         

        });

</script> 

Output

After hover mouse