jQuery Textarea Counter Plugin [Latest: Version 2]

This plugin allows you to set and limit user input by max characters within html textarea (it is only limited by characters other than words). It binds keyup, paste and drag events. The extra div is displayed under the textarea, which shows the current number of input characters and words. You can set your own styles and customise the text counter information. Version 2 provides the callback function.
Notice: For windows OS, new line character occupies two characters (\r\n) instead of one (\n)

Demo

Input, drag & drop or paste some texts in the textarea below.

Only Count characters and words

			$(document).ready(function(){
				var options = { 
					'originalStyle': 'originalDisplayInfo'
				};
				$('#testTextarea').textareaCount(options);
			});

Count and limit characters, format the defined format display information

			var options2 = {
				'maxCharacterSize': 200,
				'originalStyle': 'originalDisplayInfo',
				'warningStyle': 'warningDisplayInfo',
				'warningNumber': 40,
				'displayFormat': '#input Characters | #left Characters Left | #words Words'
			};
			$('#testTextarea2').textareaCount(options2);

Count and limit characters and use the callback function

			var options3 = {
				'maxCharacterSize': 200,
				'originalStyle': 'originalDisplayInfo',
				'warningStyle': 'warningDisplayInfo',  
				'warningNumber': 40,
				'displayFormat': '#input/#max | #words Words'
			};
			$('#testTextarea3').textareaCount(options3, function(data){
				var result = 'Characters Input: ' + data.input + '
';
				 result += 'Words Input: ' + data.words + '
';
				 result += 'Left Characters: ' + data.left + '
';
				 result += 'Characters Limitation: ' + data.max + '
';
				$('#textareaCallBack').html(result);
			});

Document & Settings

  • Step One: Version 2 Config Options  
    [For Version One config doc, please download version one package right side.]
     
    Options Description
    maxCharacterSize Define the maximum number of characters. Default is -1. Limit characters does work only when maxCharacterSize > 0
    originalStyle Set original class style
    warningStyle Set warning class style
    warningNumber If number of characters of user input is over the warning number, the information style will be changed to warning style.
    displayFormat Define your display information format. There are four keywords: #input, #max, #left, #words.
    • #input: represents your current number of input characters
    • #max: represents your predefined max character size
    • #left: represents how many characters you left
    • #words: represents your current number of input words

    For example: 'displayFormat' : '#input characters and #words words'
    The result will be: 123 characters and 20 words.
    #input and #words will be substituted by current characters and words
    Remeber:#max and #left does work only when maxCharacterSize > 0
  • Step Two: Add Callback function 

    In the 3rd example, you saw that not only counter information was shown but also extra information was displayed in the div above the textarea This is done by the callback function. 

    					$('#testTextarea3').textareaCount(options3, function(data){
						var result = 'Characters Input: ' + data.input + '<br />';
						 result += 'Words Input: ' + data.words + '<br />';
						 result += 'Left Characters: ' + data.left + '<br />';
						 result += 'Characters Limitation: ' + data.max + '<br />';
						$('#textareaCallBack').html(result);
					});

    You can pass user defined function as an argument after options.
    Function data is an object, which contains four values:

    • data.input: current number of input characters
    • data.max: max character size
    • data.left: how many left characters
    • data.words: current number of input words

Bookmark and Share