In this article I will explain how to enforce character limit with character count feature when text is pasted in HTML TextArea.
The jQuery Character limit Plugin works in both cases, when the text is pasted using CTRL + V keyboard shortcut and also when the text is pasted using the Paste option in Context Menu which opens when TextArea is right clicked.
Applying the jQuery Character Limit Plugin for TextArea
Below you will notice the implementation of the jQuery MaxLength plugin. 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
be a HTML SPAN or DIV.
3. DisplayCharacterCount (optional) – Default true. If set to false the Character counting will be disabled.
<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
$("#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>
<textarea id="TextBox1" style="height: 100px; width: 300px">Mudassar Khan</textarea>
<br />
<br />
<div id="counter">
</div>
<textarea id="TextBox2" style="height: 100px; width: 300px"></textarea>
<br />
<br />
<textarea id="TextBox3" style="height: 100px; width: 300px"></textarea>
![Enforce TextArea Character Limit during Paste using jQuery]()
Demo
Downloads
