问题描述

我对带有文本框的 onkeyup 事件有疑问.我的功能是检查密码文本框的密码强度.所以当用户输入他的密码时，它会调用检查密码强度的功能，并在标签中显示他的密码是非常弱/弱/中/强.此外，文本框背景将根据密码的强度显示颜色.但是，当我输入密码文本框时，标签不显示任何内容，文本框也不会改变颜色.

<asp:TextBox ID="tb_password" runat="server" TextMode="Password" onKeyUp="checkPasswordStrength()" ></asp:TextBox><script type="text/javascript">函数 checkPasswordStrength(){var passwordTextbox = document.getElementById("tb_password");var 密码 = passwordTextbox.value;var specialCharacters = "!@#$%^&*_+";var passwordScore = 0;for (var i = 0; i  -1)){密码分数 += 20;}}if (/[a-z]/.test(password)){密码分数 += 20;}if (/[A-Z]/.test(password)) {密码分数 += 20;}if (password.length >= 8) {密码分数 += 20;}if (/[d]/.test(password)) {密码分数 += 20;}var 强度 = "";var backgroundColor = "";如果(passwordScore >= 100){强度 = "强"backgroundColor = "绿色";}否则如果(passwordScore >= 80){强度 = "中"backgroundColor = "黄色";}否则如果(passwordScore >= 60){强度 = "弱"backgroundColor = "红色";}别的{强度 = "很弱"backgroundColor = "栗色";}document.getElementById("lbl_passwordStrength").innerHTML = strength;passwordTextbox.style.color = "白色";passwordTextbox.style.backgroundColor = backgroundColor;}<br/><asp:Label ID="lbl_passwordStrength" runat="server"></asp:Label>

ASP.NET 网页中包含的每个控件都必须包含唯一标识符 (ID).为了保持这种唯一性，ASP.Net 在页面呈现为 HTML 时更改控件的 ID.

这里，如果下面的控件在 中，那么 ID 很可能会更改为 ctl00$ctl00$ContentPlaceHolder$tb_password 例如.

<asp:TextBox ID="tb_password" runat="server" TextMode="Password" onKeyUp="checkPasswordStrength()"></asp:TextBox>

为了克服这个问题，您可以在标记中使用客户端模式或在javascript中使用ClientID.

方法一:

<asp:TextBox ID="tb_password" runat="server" TextMode="Password" onKeyUp="checkPasswordStrength()" ClientMode="Static"></asp:TextBox>

<块引用>

方法二:

var passwordTextbox = document.getElementById("<%=tb_password.ClientID%>");....document.getElementById("<%=lbl_passwordStrength.ClientID%>").innerHTML = strength;passwordTextbox.style.color = "白色";passwordTextbox.style.backgroundColor = backgroundColor;

I have an issue with onkeyup event with textbox. my function is to check password strength of the password textbox. so when a users enter his password, it will call the function of checking password strength and show in a label if his password is very weak/weak/medium/strong. Also, the textbox background will show colors according to the strength of the password. however when i type in the password textbox, the label does not show anything and the textbox does not change color.

<asp:TextBox ID="tb_password" runat="server" TextMode="Password" onKeyUp="checkPasswordStrength()"  ></asp:TextBox>
                        <script type="text/javascript">
    function checkPasswordStrength()
    {
        var passwordTextbox = document.getElementById("tb_password");
        var password = passwordTextbox.value;
        var specialCharacters = "!@#$%^&*_+";
        var passwordScore = 0;

        for (var i = 0; i < password.length; i++)
        {
            if(specialCharacters.indexOf(password.charAt(i) > -1))
            {
                passwordScore += 20;
            }
        }

        if (/[a-z]/.test(password))
        {
            passwordScore += 20;
        }

        if (/[A-Z]/.test(password)) {
            passwordScore += 20;
        }

        if (password.length >= 8) {
            passwordScore += 20;
        }

        if (/[d]/.test(password)) {
            passwordScore += 20;
        }

        var strength = "";
        var backgroundColor = "";

        if (passwordScore >= 100)
        {
            strength = "Strong"
            backgroundColor = "green";
        }

        else if (passwordScore >= 80)
        {
            strength = "Medium"
            backgroundColor = "yellow";
        }

        else if (passwordScore >= 60) {
            strength = "Weak"
            backgroundColor = "red";
        }

        else
        {
            strength = "Very Weak"
            backgroundColor = "maroon";
        }

        document.getElementById("lbl_passwordStrength").innerHTML = strength;
        passwordTextbox.style.color = "white";
        passwordTextbox.style.backgroundColor = backgroundColor;
    }

</script>
                        <br />
                        <asp:Label ID="lbl_passwordStrength" runat="server"></asp:Label>

Every control that is included in an ASP.NET Web page must contain a unique identifier (ID). To maintain this uniqueness ASP.Net change the ID of control when the page gets rendered into HTML.

Here, if below control is inside <asp:ContentPlaceHolder> then the ID is likely to gets changed into ctl00$ctl00$ContentPlaceHolder$tb_password for example.

<asp:TextBox ID="tb_password" runat="server" TextMode="Password" onKeyUp="checkPasswordStrength()"></asp:TextBox>

To overcome this what you can do it either use Client Mode in mark-up or use ClientID in javascript.

Method 1:

<asp:TextBox ID="tb_password" runat="server" TextMode="Password" onKeyUp="checkPasswordStrength()" ClientMode="Static"></asp:TextBox>

Method 2:

var passwordTextbox = document.getElementById("<%=tb_password.ClientID%>");
.
.
.
.
document.getElementById("<%=lbl_passwordStrength.ClientID%>").innerHTML = strength;
passwordTextbox.style.color = "white";
passwordTextbox.style.backgroundColor = backgroundColor;

这篇关于文本框的 asp.net onkeyup 事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！