asp.net onkeyupイベントのテキストボックス

Question

テキストボックスのonkeyupイベントに関する問題があります。私の機能は、パスワードのテキストボックスのパスワード強度を確認することです。ユーザーがパスワードを入力すると、パスワードの強度を確認する機能が呼び出され、パスワードが非常に弱い/弱い/中程度/強い場合はラベルに表示されます。また、テキストボックスの背景には、パスワードの強さに応じた色が表示されます。ただし、パスワードのテキストボックスに入力すると、ラベルに何も表示されず、テキストボックスの色も変わりません。

<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

ASP.NET Webページに含まれるすべてのコントロールには、一意の識別子（ID）が含まれている必要があります。このユニークさを維持するために、ASP.Netは、ページがHTMLにレンダリングされるときにコントロールのIDを変更します。

ここで、以下のコントロールが<asp:ContentPlaceHolder>の場合、IDはctl00$ctl00$ContentPlaceHolder$tb_passwordに変更される可能性があります。どちらかあなたがそれを何ができるか、これを克服するためのマークアップにクライアントモードを使用するか、JavaScriptでのClientIDを使用するには

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

。

方法1：

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

方法2：

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