Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

jQuery character counter plugin

By: jrhorn424 on Mar 17th, 2012  |  syntax: jQuery  |  size: 5.13 KB  |  hits: 61  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. /* file: character-counter-options.js */
  2. var info;
  3. $(document).ready(function(){
  4.     var options = {
  5.         'maxCharacterSize': -2,
  6.         'warningStyle' : 'warning',
  7.         'warningNumber': 40,
  8.         'displayFormat' : '#input/140'
  9.     };
  10.     $('#new-micropost').textareaCount(options);
  11. });
  12.  
  13.  
  14. /* file: character-counter.js */
  15. /*
  16.  * jQuery Textarea Characters Counter Plugin v 2.0
  17.  * Examples and documentation at: http://roy-jin.appspot.com/jsp/textareaCounter.jsp
  18.  * Copyright (c) 2010 Roy Jin
  19.  * Version: 2.0 (11-JUN-2010)
  20.  * Dual licensed under the MIT and GPL licenses:
  21.  * http://www.opensource.org/licenses/mit-license.php
  22.  * http://www.gnu.org/licenses/gpl.html
  23.  * Requires: jQuery v1.4.2 or later
  24.  */
  25. (function($){
  26.         $.fn.textareaCount = function(options, fn) {
  27.                 var defaults = {
  28.                         maxCharacterSize: -1,
  29.                         originalStyle: 'originalTextareaInfo',
  30.                         warningStyle: 'warningTextareaInfo',
  31.                         warningNumber: 20,
  32.                         displayFormat: '#input characters | #words words'
  33.                 };
  34.                 var options = $.extend(defaults, options);
  35.  
  36.                 var container = $(this);
  37.  
  38.                 $("<div class='charleft'>&nbsp;</div>").insertAfter(container);
  39.  
  40.                 //create charleft css
  41.                 var charLeftCss = {
  42.                         // 'width' : container.width()
  43.                 };
  44.  
  45.                 var charLeftInfo = getNextCharLeftInformation(container);
  46.                 charLeftInfo.addClass(options.originalStyle);
  47.                 charLeftInfo.css(charLeftCss);
  48.  
  49.                 var numInput = 0;
  50.                 var maxCharacters = options.maxCharacterSize;
  51.                 var numLeft = 0;
  52.                 var numWords = 0;
  53.  
  54.                 container.bind('keyup', function(event){limitTextAreaByCharacterCount();})
  55.                                  .bind('mouseover', function(event){setTimeout(function(){limitTextAreaByCharacterCount();}, 10);})
  56.                                  .bind('paste', function(event){setTimeout(function(){limitTextAreaByCharacterCount();}, 10);});
  57.  
  58.  
  59.                 function limitTextAreaByCharacterCount(){
  60.                         charLeftInfo.html(countByCharacters());
  61.                         //function call back
  62.                         if(typeof fn != 'undefined'){
  63.                                 fn.call(this, getInfo());
  64.                         }
  65.                         return true;
  66.                 }
  67.  
  68.                 function countByCharacters(){
  69.                         var content = container.val();
  70.                         var contentLength = content.length;
  71.  
  72.                         //Start Cut
  73.                         if(options.maxCharacterSize > 0){
  74.                                 //If copied content is already more than maxCharacterSize, chop it to maxCharacterSize.
  75.                                 if(contentLength >= options.maxCharacterSize) {
  76.                                         content = content.substring(0, options.maxCharacterSize);
  77.                                 }
  78.  
  79.                                 var newlineCount = getNewlineCount(content);
  80.  
  81.                                 // newlineCount new line character. For windows, it occupies 2 characters
  82.                                 var systemmaxCharacterSize = options.maxCharacterSize - newlineCount;
  83.                                 if (!isWin()){
  84.                                          systemmaxCharacterSize = options.maxCharacterSize
  85.                                 }
  86.                                 if(contentLength > systemmaxCharacterSize){
  87.                                         //avoid scroll bar moving
  88.                                         var originalScrollTopPosition = this.scrollTop;
  89.                                         container.val(content.substring(0, systemmaxCharacterSize));
  90.                                         this.scrollTop = originalScrollTopPosition;
  91.                                 }
  92.                                 charLeftInfo.removeClass(options.warningStyle);
  93.                                 if(systemmaxCharacterSize - contentLength <= options.warningNumber){
  94.                                         charLeftInfo.addClass(options.warningStyle);
  95.                                 }
  96.  
  97.                                 numInput = container.val().length + newlineCount;
  98.                                 if(!isWin()){
  99.                                         numInput = container.val().length;
  100.                                 }
  101.  
  102.                                 numWords = countWord(getCleanedWordString(container.val()));
  103.  
  104.                                 numLeft = maxCharacters - numInput;
  105.                         } else {
  106.                                 //normal count, no cut
  107.                                 var newlineCount = getNewlineCount(content);
  108.                                 numInput = container.val().length + newlineCount;
  109.                                 if(!isWin()){
  110.                                         numInput = container.val().length;
  111.                                 }
  112.                                 numWords = countWord(getCleanedWordString(container.val()));
  113.                         }
  114.  
  115.                         return formatDisplayInfo();
  116.                 }
  117.  
  118.                 function formatDisplayInfo(){
  119.                         var format = options.displayFormat;
  120.                         format = format.replace('#input', numInput);
  121.                         format = format.replace('#words', numWords);
  122.                         //When maxCharacters <= 0, #max, #left cannot be substituted.
  123.                         if(maxCharacters > 0){
  124.                                 format = format.replace('#max', maxCharacters);
  125.                                 format = format.replace('#left', numLeft);
  126.                         }
  127.                         return format;
  128.                 }
  129.  
  130.                 function getInfo(){
  131.                         var info = {
  132.                                 input: numInput,
  133.                                 max: maxCharacters,
  134.                                 left: numLeft,
  135.                                 words: numWords
  136.                         };
  137.                         return info;
  138.                 }
  139.  
  140.                 function getNextCharLeftInformation(container){
  141.                                 return container.next('.charleft');
  142.                 }
  143.  
  144.                 function isWin(){
  145.                         var strOS = navigator.appVersion;
  146.                         if (strOS.toLowerCase().indexOf('win') != -1){
  147.                                 return true;
  148.                         }
  149.                         return false;
  150.                 }
  151.  
  152.                 function getNewlineCount(content){
  153.                         var newlineCount = 0;
  154.                         for(var i=0; i<content.length;i++){
  155.                                 if(content.charAt(i) == '\n'){
  156.                                         newlineCount++;
  157.                                 }
  158.                         }
  159.                         return newlineCount;
  160.                 }
  161.  
  162.                 function getCleanedWordString(content){
  163.                         var fullStr = content + " ";
  164.                         var initial_whitespace_rExp = /^[^A-Za-z0-9]+/gi;
  165.                         var left_trimmedStr = fullStr.replace(initial_whitespace_rExp, "");
  166.                         var non_alphanumerics_rExp = rExp = /[^A-Za-z0-9]+/gi;
  167.                         var cleanedStr = left_trimmedStr.replace(non_alphanumerics_rExp, " ");
  168.                         var splitString = cleanedStr.split(" ");
  169.                         return splitString;
  170.                 }
  171.  
  172.                 function countWord(cleanedWordString){
  173.                         var word_count = cleanedWordString.length-1;
  174.                         return word_count;
  175.                 }
  176.         };
  177. })(jQuery);
create a new version of this paste RAW Paste Data