Post
Ask Question

Count Remaining Characters in Textbox using JavaScript

Introduction

Open Visual Studio and create new project and select Web template from the list and select ASP.NET Empty Web Application. Enter the name of your new application and click on OK.

Right click on the Project and select Add -> Web Form and name it as Default.aspx.

Now Drag and drop one TextBox and Label on the Default.aspx page in the design mode.

In the head section of the page write the below JavaScript Count function, and set the MaxLength property of TextBox to 20 characters.

  1. <head id="Head1" runat="server">  
  2.     <title>Remaining Character Counter</title>  
  3.     <script type="text/javascript">  
  4.         function Count() {  
  5.   
  6.             var i = document.getElementById("mylabel").value.length;  
  7.             document.getElementById("display").innerHTML = 20 - i;  

  9.         }  
  10.     </script>  
  11. </head>  
ASPX Page Code
  1. <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="RemainingCharacterCounter._Default" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html>  
  6. <head id="Head1" runat="server">  
  7.     <title>Remaining Character Counter</title>  
  8.     <script type="text/javascript">  
  9.         function Count() {  
  10.   
  11.             var i = document.getElementById("mylabel").value.length;  
  12.             document.getElementById("display").innerHTML = 20 - i; 
  13.  
  14.         }  
  15.     </script>  
  16. </head>  
  17. <body>  
  18.     <form id="form1" runat="server">  
  19.         <div>  
  20.             <p style=" color:blue; width: 323px; z-index: 1; left: 506px; top: 13px; position: absolute; height: 19px; margin-left: 22px; margin-bottom: 12px;"> Welcome to Remaining Character Counting Page </p>  
  21.             <asp:Panel ID="Panel1" runat="server" BorderColor="#000000" BorderStyle="Groove"  Style="width: 360px; left: 506px; top: 73px; position: absolute; height: 142px; right: 291px;">  
  22.                 <br />  
  23.                 <asp:Label ID="label" runat="server" Text="  Enter your Text here: " style="z-index: 1; color:red; left: 42px; top: 43px; position: absolute"></asp:Label>  
  24.                 <asp:TextBox ID="mylabel" runat="server" MaxLength="20" onkeyup="Count()" style="width: 128px; left: 184px; top: 38px; position: absolute; height: 20px; right: 40px; " > </asp:TextBox>  
  25.                 <br />  
  26.                 <br />  
  27.                 <asp:Label ID="NewLabel" runat="server"  Text="Remaining Characters: " style="z-index: 1; color:red; left: 38px; top: 80px; position: absolute"></asp:Label>  
  28.                 <asp:Label ID="display" runat="server" Text="20" style="width: 26px; color:blueviolet; left: 190px; top: 82px; position: absolute; height: 25px; margin-right: 8px; z-index: 1;"></asp:Label>  
  29.             </asp:Panel>  
  30.         </div>  
  31.     </form>  
  32. </body>  
  33. </html>  
Output