only - eventos textbox c#

asp.net onkeyup evento para cuadro de texto

Question

Tengo un problema con el evento onkeyup con textbox. mi función es verificar la fortaleza de la contraseña del cuadro de texto de la contraseña. de modo que cuando un usuario ingresa su contraseña, llamará a la función de verificar la fortaleza de la contraseña y la mostrará en una etiqueta si su contraseña es muy débil / débil / mediana / fuerte. Además, el fondo de la caja de texto mostrará los colores de acuerdo con la fuerza de la contraseña. Sin embargo, cuando escribo el cuadro de texto de la contraseña, la etiqueta no muestra nada y el cuadro de texto no cambia de 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>

Answer 1

Cada control que se incluye en una página web ASP.NET debe contener un identificador único (ID). Para mantener esta singularidad, ASP.Net cambia la ID de control cuando la página se procesa en HTML.

Aquí, si el control de abajo está dentro de <asp:ContentPlaceHolder> , es probable que la identificación se cambie a ctl00$ctl00$ContentPlaceHolder$tb_password por ejemplo.

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

Para superar esto, puede usar el modo cliente en el marcado o usar ClientID en javascript.

Método 1:

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

Método 2:

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