Post
Ask Question

How to count character of TextBox in ASP.NET

Introduction

 
Here, we will see how to check the number of character has been inserted in the TextBox. A TextBox Which has max length 120 character and we insert a character in TextBox max length will be display 119 characters. When We enter 120 characters in the TextBox that will be the Max length. 
 
Drag and drop a TextBox on the page. Select TextBox and press F4 to the property window.
  1. TextMode="MultiLine" 
Now add the following code in the Head section of the .aspx page.
  1. <head runat="server">  
  2.     <title></title>  
  3.     <style type="text/css">   
  4.     .valid   
  5.     {  
  6.         background-color: #FFFFFF;  
  7.         color: #000000;  
  8.     }  
  9.     .invalid   
  10.     {  
  11.         background-color: #FFCCCC;  
  12.         color: #ff0000;  
  13.     }  
  14.     </style>  
  15.     <script language="javascript">   
  16.     function textCounter1(field, maxlimit)   
  17.     {  
  18.         if (field.value.length > maxlimit)   
  19.         {  
  20.             field.value = field.value.substring(0, maxlimit);  
  21.             document.getElementById('message').className = "invalid";  
  22.             document.getElementById('message').focus(); //alert('You have reached your maximum character limit.');}  
  23.         else   
  24.         {  
  25.             document.getElementById('message').className = "valid";  
  26.         }  
  27.     }  
  28.   
  29.     function textCounter(field, countfield, maxlimit)   
  30.     {  
  31.         if (field.value.length > maxlimit) // if too long...trim it!   
  32.             field.value = field.value.substring(0, maxlimit);  
  33.         else   
  34.             countfield.value = maxlimit - field.value.length;  
  35.     }  
  36.     </script>  
  37. </head> 
Now add the following code in the body section.
  1. <body bgcolor="#FFFFFF">  
  2.     <form name="blah" action="" method="post" runat="server">  
  3.            
  4.         <asp:TextBox ID="message" runat="server" name="message" onkeydown="textCounter(this.form.message,this.form.remLen,120)" onkeyup="textCounter1(this.form.message, 120)" class="validentry" Height="101px" TextMode="MultiLine" Width="228px"></asp:TextBox>  
  5.         <br/>   
  6.     <input readonly type="text" name="remLen" size="3" maxlength="3" value="120" position: absolute; style="width: 34px">Character left  
  7.     <br/>   
  8.     <br/>   
  9.     <br/>   
  10.     </form>  
  11. </body> 
Now run the application and check number of character has been inserted in the TextBox.
 
text1.gif
 
Figure1
 
Now Insert max length characters in TextBox.
 
text2.gif
 
Figure2
Next Recommended Reading TextBox Validation Using JavaScript In ASP.NET In Real Time Scenario