jQuery Textarea 字符统计插件

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)


演示地址:
http://roy-jin.appspot.com/jsp/textareaCounter.jsp

使用步骤:

 

• 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.

  view plain copy to clipboard print ?

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

  					$('#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