如何在列表视图 ASP.NET 中添加 Show/Hide 密码按钮？

Question

<EditItemTemplate >
    <li style="">username:
        <asp:Label ID="usernameLabel1" runat="server" Text='<%# Eval("username") %>' />
        <br />
        password:
        <asp:TextBox ID="passwordTextBox" runat="server" Text='<%# Bind("password") %>' />

        <asp:Button ID="btnClick" OnClick="btnClick_Click" runat="server" Text="Hide/Show" />
        <br />
        email:
        <asp:TextBox ID="emailTextBox"  runat="server" Text='<%# Bind("email") %>' />

        <br />
        phone:
        <asp:TextBox ID="phoneTextBox" runat="server" Text='<%# Bind("phone") %>' />
        <br />
        dob:
        <asp:TextBox ID="dobTextBox" runat="server" Text='<%# Bind("dob") %>' />
        <br />
        gender:
        <asp:TextBox ID="genderTextBox" runat="server" Text='<%# Bind("gender") %>' />
        <br />
        <asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="Update" />
        <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="Cancel" />
    </li>
</EditItemTemplate>

例如，在 Listview 编辑项模板中，我想添加该按钮，以便如何在代码隐藏文件中访问该按钮，就像在 Listview 中一样。

Answer 1

要显示密码，请尝试以下客户端方法：

.wrapper {
  display: inline-block;
  position: relative;
}

.reveal-eye {
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  z-index: 2;
  width: 30px;
  background: #fff url(https://dtzbdy9anri2p.cloudfront.net/cache/b55f544d09a0872a74b4427ce1fe18dd78418396/telerik/img/dist/reveal-password.png) 50% 50% no-repeat;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s ease 0s, visibility 0s linear .2s;
}

.reveal-eye.is-visible {
  display: block;
  visibility: visible;
  opacity: 1;
  transition: opacity .2s ease 0s, visibility 0s linear 0s;
}

<div class="wrapper">
    <!--<asp:TextBox ID="passwordTextBox" runat="server" TextMode="Password" />-->
    <input type="password" id="passwordTextBox" />
</div>


<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    function checkShowPasswordVisibility() {
        var $revealEye = $(this).parent().find(".reveal-eye");
        if (this.value) {
            $revealEye.addClass("is-visible");
        } else {
            $revealEye.removeClass("is-visible");
        }
    }

    $(document).ready(function () {
        var txtPassword = document.getElementById('passwordTextBox');
        var $revealEye = $('<span class="reveal-eye"></span>')
        $(txtPassword).parent().append($revealEye);
        $(txtPassword).on("keyup", checkShowPasswordVisibility)

        $revealEye.on({
            mousedown: function () { txtPassword.setAttribute("type", "text") },
            mouseup: function () { txtPassword.setAttribute("type", "password") },
            mouseout: function () { txtPassword.setAttribute("type", "password") }
        });
    })
</script>

示例来自：ShowPassword button for RadTextBox with TextMode Password

但是，如果您想在 PostBack 期间在服务器端执行此操作，下面是一个示例，说明如何在单击按钮 Show/Hide 时访问文本框：

protected void btnClick_Click(object sender, EventArgs e)
{
    Button btn = sender as Button;

    TextBox TextBox1 = btn.Parent.FindControl("TextBox1") as TextBox;

    TextBox1.TextMode = TextBox1.TextMode == TextBoxMode.Password ? TextBoxMode.SingleLine : TextBoxMode.Password;
}

Answer 2

您正在开发一个网站，对于任何用户界面交互，强烈建议您使用javascript、css来操作它。仅使用代码隐藏来处理数据。

function toggleShowPassword() {
 var passwordTextBox = document.getElementById('passwordTextBox');
 if(passwordTextBox.getAttribute('type')=='text'){
  passwordTextBox.type='password';
 }
 else {
  passwordTextBox.type='text';
 }
}

.button {
line-height: 100%;
display: inline-block;
padding: 7px 15px;
background: #6eddff;
text-decoration: none;
color: black;
border-radius: 6px;
}
.button:active,
.button:hover{
background: #3d9dba;
color: white;
}

<input id='passwordTextBox' type='password' value='abcd' />
<a class='button' href='#' onclick='toggleShowPassword(); return false;'>
Show/Hide Password</a>

如何在列表视图 ASP.NET 中添加 Show/Hide 密码按钮？

How to add Show/Hide Password button in Listview ASP.NET?

asp.net

webforms