使用asp.net登录Web表单时如何显示密码

Question

I have login form

Login form

I want to show password when check box is checked. I write below code

<asp:TableRow runat="server">
                    <asp:TableCell runat="server">
                        <asp:TextBox runat="server" ID="txtPassword" Width="100%" TextMode="Password"></asp:TextBox>
                    </asp:TableCell>
                    <asp:TableCell runat="server">
                        <asp:CheckBoxList runat="server" ID="showHidePassword">
                            <asp:ListItem Value="1" Text="Show Password"></asp:ListItem>
                        </asp:CheckBoxList>
                    </asp:TableCell>
                </asp:TableRow>

And try some JQuery code

$(function(){
$("#showHidePassword").bind("click",function(){
if($(this).is(":checked")){
// then I try to remove the "TextMode=Password"
// and think may be it works but there is no method that change textmode
}
});
});

Please help.

Answer 1

You can try changing the type attribute on change event, you can do something like this as an example:

 $(function() { $("#showHidePassword").on("change", function() { var checked = this.checked; $(this).siblings('input').attr('type', function() { return checked ? "text" : "password"; }) }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" id="showHidePassword">show password <br> <input type="password"> 

Answer 2

Actually I use CheckBoxList and use the ID of this control. But need control of checked item. So first of all use CheckBox instead of CheckBoxList .

And write below code in head section.

$(function () {

            $("#showHidePassword").bind("click", function () {

                var txtPassword = $("#txtPassword");

                if ($(this).is(":checked")) {

                    txtPassword.after('<input onchange = "PasswordChanged(this);" id = "txt_' + txtPassword.attr("id") + '" type = "text" value = "' + txtPassword.val() + '" />');

                    txtPassword.hide();

                } else {

                    txtPassword.val(txtPassword.next().val());

                    txtPassword.next().remove();

                    txtPassword.show();

                }

            });

        });

        function PasswordChanged(txt) {

            $(txt).prev().val($(txt).val());

        }

That's it.

Answer 3

You can try this

HTML

<input class="pwd" type="password">
<input class="chk" type="checkbox">Show Password

JQUERY

$(document).ready(function() {
  $('.chk').on('click', function() {
    if ($('.chk').prop("checked")) {
      $('.pwd').prop('type', 'text');
    } else {
      $('.pwd').prop('type', 'password');
    }
  });
});

kindly check https://jsfiddle.net/vzuLn88j/