In this article I will explain with an example, how to build a TextBox Character Counter using JavaScript i.e. Count number of characters in TextBox using JavaScript.
This article will illustrate how to use the ASPSnippets MaxLength jQuery plugin for counting the number of characters in TextBox and also implement maximum length validation using JavaScript.
Understanding the ASPSnippets MaxLength jQuery plugin
The ASPSnippets MaxLength jQuery has the following required and optional parameters:
1. MaxLength(required) – Integer value indicating the Maximum character length limit.
2. CharacterCountControl(optional) – By default the plugin will display character count below the TextArea, but user has option to explicitly specify the Character Count Control.
Note: The character count control can only be a HTML SPAN or DIV element.
3. DisplayCharacterCount(optional) – Default true. If set to false the Character counting will be disabled.
HTML Markup
The HTML Markup consists of three TextBoxes for which the Maximum Length validation will be implemented.
There is also an HTML DIV for displaying the Character Count for the second TextBox.
<input type="text" id="TextBox1" style="width: 300px" value = "Mudassar Khan" />
<br />
<br />
<div id="counter" style="color:red;font-weight:bold"></div>
<input type="text" id="TextBox2" style="width: 300px" />
<br />
<br />
<input type="text" id="TextBox3" style="width: 300px" />
Counting number of characters in TextBox using JavaScript and jQuery
Inside the jQuery document ready event handler, the ASPSnippets MaxLength jQuery plugin is applied to all the three HTML TextBoxes with three different configurations.
First TextBox – Default configuration. Maximum Length validation will be performed and Character count will be displayed.
Second TextBox – Maximum Length validation will be performed and Character Count will be displayed in a HTML DIV.
Third TextBox – Only Maximum Length validation will be performed.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="MaxLength.min.js"></script>
<script type="text/javascript">
$(function () {
//Normal Configuration.
$("#TextBox1").MaxLength({ MaxLength: 10 });
//Specifying the Character Count control explicitly.
$("#TextBox2").MaxLength(
{
MaxLength: 15,
CharacterCountControl: $('#counter')
});
//Disable Character Count.
$("#TextBox3").MaxLength(
{
MaxLength: 20,
DisplayCharacterCount: false
});
});
</script>
Screenshot
![TextBox Character Counter: Count number of characters in TextBox using JavaScript]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
