尝试在 asp.net 中启用显示/隐藏功能答案

【问题标题】：Trying to enable show/hide feature in asp.net尝试在 asp.net 中启用显示/隐藏功能
【发布时间】：2017-07-14 19:27:53
【问题描述】：

我正在尝试启用显示/隐藏密码功能。我正在使用 C# 创建一个 asp.net Web 表单。

我的代码如下，

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class show : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
    {
        if (CheckBox1.Checked == false)
        {
            TextBox1.TextMode = TextBoxMode.Password;
        }

        if (CheckBox1.Checked == true)
        {
            TextBox1.TextMode = TextBoxMode.SingleLine;
        }
    }
}

在 mypage.aspx 上，

有一个自动回发属性为真的复选框和一个文本模式为密码的文本框。

预期的结果是：-

选中复选框时将密码显示为文本。

未选中复选框时隐藏密码。

问题是：-

此代码只工作一次，即当复选框被选中或再次取消选中时，它不会被执行。文本框变为空白。

请尽快帮助我。

【问题讨论】：

我建议不要在回发时这样做。当它应该主要是客户端 JavaScript 时，这是一种非常繁重的方式。
感谢 Kay Lee 审阅我的帖子。

标签： c# asp.net textbox passwords show-hide

【解决方案1】：

您在TextBox 中失去了价值，因为在选择更改时，页面再次加载，您需要检查它是 postBack 还是第一次加载并设置 textBox 值。

    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            string Password = TextBox1.Text;
            TextBox1.Attributes.Add("value", Password);
        }
     }

您的问题将得到解决。我已经测试过了。

希望对你有帮助！

【讨论】：

【解决方案2】：

完全不需要为此使用回发。 An example using jQuery:

标记：

<label>Password fields are just a UI convenience:</label>
<input type="password" id="password" value="super secret password" />
<label>
  <input type="checkbox" id="toggle-password" /> Toggle
</label>

jQuery 代码：

$(function() {
  $('#toggle-password').on('change', function(e) {
    var _this = $(this);

    if (_this.is(':checked')) {
      $('#password').attr({
        'type': 'text'
      });
    } else {
      $('#password').attr({
        'type': 'password'
      });
    }
  })
});

A vanilla JS version:

var toggle = document.getElementById('toggle-password');
var textbox = document.getElementById('password');

toggle.addEventListener("click", function() {
  var isChecked = toggle.checked;

  if (isChecked) {
    textbox.type = "text";
  } else {
    textbox.type = "password";
  }
})

【讨论】：

【解决方案3】：

出于安全原因，您不能设置密码类型字段的文本属性。因此，在更改模式后设置值的另一种方法是

if (CheckBox1.Checked == false)
            {
                string pass = TextBox1.Text;
                TextBox1.TextMode = TextBoxMode.Password;
                TextBox1.Attributes.Add("value", pass);

            }

            if (CheckBox1.Checked)
            {
                TextBox1.TextMode = TextBoxMode.SingleLine;
            }

【讨论】：

【解决方案4】：

<head runat="server">
    <title>Show Hide Password</title>
    <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  
                $('#txtCurrentpassword').attr('type', 'text');
                $('.icon').removeClass('fa fa-eye-slash').addClass('fa fa-eye');
            },
            function () {
                //Change the attribute back to password  
                $('#txtCurrentpassword').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>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#show_password1').hover(function show() {
                //Change the attribute to text  
                $('#txtNewPassword').attr('type', 'text');
                $('.icon').removeClass('fa fa-eye-slash').addClass('fa fa-eye');
            },
            function () {
                //Change the attribute back to password  
                $('#txtNewPassword').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>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#show_password2').hover(function show() {
                //Change the attribute to text  
                $('#txtConfirmPassword').attr('type', 'text');
                $('.icon').removeClass('fa fa-eye-slash').addClass('fa fa-eye');
            },
            function () {
                //Change the attribute back to password  
                $('#txtConfirmPassword').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>
</head>
<body>
    <form id="form1" runat="server">
        <div class="container">
            <br />
            <br />
            <br />
            <div class="col-md-10">
                <div class="" style="display: none" runat="server" id="divStatusMsg">
                    <asp:HiddenField ID="lblLoginUserId" runat="server" />
                    <asp:HiddenField ID="HidEncrptedPWD" runat="server" />
                     <asp:HiddenField ID="HidCurrEncrptedPWD" runat="server" />
                    <asp:HiddenField ID="hidError" runat="server" />
                </div>
            </div>

            <h2>Update Password</h2>
            <label class="col-form-label" style="color: red">(Min 10 Character including 1 Upper, 1 Lower Charcter, 1 Numeric & 1 Special Character)</label>
            <div class="row">
                <div class="col-md-6">

                    <label>User Name</label>
                    <div class="input-group">
                        <asp:TextBox ID="txtUserName" TextMode="SingleLine" runat="server" CssClass="form-control" Enabled="false"></asp:TextBox>

                    </div>
                </div>

            </div>
            <div class="row">
                <div class="col-md-6">

                    <label>Current Password</label>
                    <div class="input-group">
                        <asp:TextBox ID="txtCurrentpassword" TextMode="Password" runat="server" CssClass="form-control"></asp:TextBox>
                        <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>

            </div>
            <div class="row">
                <div class="col-md-6">

                    <label>New Password</label>
                    <div class="input-group">
                        <asp:TextBox ID="txtNewPassword" TextMode="Password" runat="server" CssClass="form-control"></asp:TextBox>
                        <div class="input-group-append">
                            <button id="show_password1" class="btn btn-primary" type="button">
                                <span class="fa fa-eye-slash icon"></span>
                            </button>
                        </div>
                    </div>
                </div>

            </div>
            <div class="row">
                <div class="col-md-6">

                    <label>Re-Enter Password :</label>
                    <div class="input-group">
                        <asp:TextBox ID="txtConfirmPassword" TextMode="Password" runat="server" CssClass="form-control"></asp:TextBox>
                        <div class="input-group-append">
                            <button id="show_password2" class="btn btn-primary" type="button">
                                <span class="fa fa-eye-slash icon"></span>
                            </button>
                        </div>
                    </div>
                </div>

            </div>
            <br />
            <!--Button Region-->
            <div class="row">
                <div class="col-lg-6 text-right" id="divDateSearch">
                    <div class="form-group">
                        <button type="button" id="btnSave" runat="server" class="btn btn-success btn-border btn-sm" onserverclick="btnSave_click">Change</button>
                        <button type="button" id="btnReset" runat="server" class="btn btn-default btn-border btn-sm" onserverclick="btnReset_click">Reset</button>
                    </div>
                </div>
            </div>
            <!--Button Region-->
        </div>
    </form>
</body>

【讨论】：