In this article I will share the jQuery plugin for TextArea to implement to limit characters with character count feature.
HTML TextArea control does not have MaxLength property hence I have built a MaxLength jQuery plugin which allows user to enforce character limit validation and optionally display the character count.
 
 
HTML Markup
The HTML Markup consists of three HTML TextArea controls for which the Maximum Length validation will be implemented.
There is also an HTML DIV for displaying the Character Count for the second TextArea.
<textarea id="TextBox1" style="height: 100px; width: 300px"></textarea>
<br />
<br />
<div id="counter"></div>
<textarea id="TextBox2" style="height: 100px; width: 300px">Mudassar Khan</textarea>
<br />
<br />
<textarea id="TextBox3" style="height: 100px; width: 300px"></textarea>
 
 
Implementing TextArea Character limit and Character Count using jQuery
The jQuery MaxLength plugin 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 HTML SPAN or DIV.
 
3. DisplayCharacterCount (optional) – Default true. If set to false the Character counting will be disabled.
Inside the jQuery document ready event handler, the MaxLength jQuery plugin is applied to all the three HTML TextArea controls with three different configurations.
First TextArea – Default configuration. Maximum Length validation will be performed and Character count will be displayed.
Second TextArea – Maximum Length validation will be performed and Character Count will be displayed in a HTML DIV.
Third TextArea – Only Maximum Length validation will be performed.
<script type="text/javascript" src="http://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
        $("[id*=TextBox1]").MaxLength({ MaxLength: 10 });
 
        //Specifying the Character Count control explicitly
        $("[id*=TextBox2]").MaxLength(
        {
            MaxLength: 15,
            CharacterCountControl: $('#counter')
        });
 
        //Disable Character Count
        $("[id*=TextBox3]").MaxLength(
        {
            MaxLength: 20,
            DisplayCharacterCount: false
        });
    });
</script>
 
 
Screenshot
jQuery TextArea Character Limit and Character Count plugin
 
 
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