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.

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

ASPX Page Code

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="RemainingCharacterCounter._Default" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Remaining Character Counter</title>
<script type="text/javascript">
function Count() {
var i = document.getElementById("mylabel").value.length;
document.getElementById("display").innerHTML = 20 - i;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<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>
<asp:Panel ID="Panel1" runat="server" BorderColor="#000000" BorderStyle="Groove" Style="width: 360px; left: 506px; top: 73px; position: absolute; height: 142px; right: 291px;">
<br />
<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>
<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>
<br />
<br />
<asp:Label ID="NewLabel" runat="server" Text="Remaining Characters: " style="z-index: 1; color:red; left: 38px; top: 80px; position: absolute"></asp:Label>
<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>
</asp:Panel>
</div>
</form>
</body>
</html>

Output

5 Comments

Join the conversation! Your thoughts help the community grow.

Nick Shivhare8y ago
Gud........................
Harpreet Singh11y ago
Very nice but you could have given id for your textbox as "myText" or something. myLabel might confuse some of the readers.
- Abhishek Arora11y ago
  Yes, you are right..
Shaili Dashora11y ago
Nice one..
- Abhishek Arora11y ago
  Thanks.