ASP.NET TextBox Remaining Character Counter JavaScript

This example illustrate how to count and show remaining characters in TextBox using JavaScript in Asp.Net.
Create a new website in Visual Studio and place one TextBox and Label on the default.aspx page in design mode.

Go to HTML source of page and write a JavaScript function named Count in head section of page to count remaining characters in TextBox.

Set the MaxLength property of TextBox to 10 chars.

   1:  <head runat="server">
   2:  <title>Remaining Characters Counter</title>
   3:  <script type="text/javascript">
   4:  function Count() {
   6:  var i = document.getElementById("TextBox1").value.length;
   7:  document.getElementById("Label1").innerHTML = 10 - i;
   8:          }
   9:  </script>
  10:  </head>

Call this javascript function in onkeyup event of textbox.
   1:  <asp:TextBox ID="TextBox1" runat="server" 
   2:          MaxLength="10" onkeyup="Count()">
   3:  </asp:TextBox>

If you like this post than join us or share


Find More Articles