Counting Characters Realtime in ASP TextBox Using JavaScript

Posted on: June 23rd, 2011 by
Comments Requested

Many times we’ll have a limit on the number of characters we want a user to input into our text fields. Instead of keeping them guessing or making them count how many characters they’ve already entered, we might want to show them the character count in realtime as they type in their content. We’ll need a JavaScript function, an ASP TextBox and a span or div. Here’s how it would look. Drop down to complete solution.


Counting Chars JavaScript

What we’ll need

<script type=”text/javascript”>
//function to count and display the characters
</script>
Event Name
max 70 characters <span style=”color: Red;” id = “CharsDivHeadline” ></span>
<asp:TextBox runat=”server” onkeypress=”CountCharsHeadline(this, 70)” Width=”240″ ID=”EventNameTextBox”></asp:TextBox>
[yellow]

This is the JavaScript function which will be initiated each time the user enters text into the TextBox and display the number of characters currently in the TextBox.

[red]

This is the span that will display the count of the characters in the TextBox.

[green]

Your ASP TextBox. In this example I will be using an ASP TextBox, however, any input can be used.

[blue]

The event which initiates the javascript function. This event happens each time a user enters a character into the TextBox.

Let’s start with filling in the JavaScript function

[yellow]
<script type=”text/javascript”>
function CountCharsHeadline(texteditor, charlimit)
{
var theDiv = document.getElementById(“CharsDivHeadline”);
var theText = texteditor;
theDiv.innerHTML = “characters left: “+ (charlimit –
theText.value.length).toString();
}
</script>

In the signature of our JavaScript function we pass in the editor itself and the limit we want to uphold on the characters in the TextBox. The first line of the function grabs the div or span that will display the count of the characters. The last line displays the count of the characters. If the character count is over the limit, it will display a negative number.

[blue]
onkeypress=”CountCharsHeadline(this, 70)”

Our explanation of this solution concludes with the onkeypress event. We pass into it ‘this’ which will point to our TextBox and ’70′ which represents the limit of the characters in our TextBox.

Finished Solution

<script type=”text/javascript”>
function CountCharsHeadline(texteditor, charlimit)
{
var theDiv = document.getElementById(“CharsDivHeadline”);
var theText = texteditor;
theDiv.innerHTML = “characters left: “+ (charlimit –
theText.value.length).toString();
}
</script>
Event Name
max 70 characters <span style=”color: Red;” id = “CharsDivHeadline” ></span>
<asp:TextBox runat=”server” onkeypress=”CountCharsHeadline(this, 70)” Width=”240″ ID=”EventNameTextBox”></asp:TextBox>

Enjoy.


Tags: , , , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>