Javascript character counter help

Question

У меня есть код, который я использую для подсчета символов во входной/текстовой области и отображения обратного отсчета на моей странице. Моя проблема в том, что я хочу, чтобы определить, какой div я хочу, чтобы счетчик отображался в.

Как добавить переменную к этому коду, в котором я могу определить, какой div я хочу, чтобы счетчик появился в ????

Помогите мне гениев !!!

(function($) { 

    $.fn.charCount = function(options){ 

     // default configuration properties 
     var defaults = {  
      allowed: 150,  
      warning: 25, 
      css: 'counter', 
      counterElement: 'span', 
      cssWarning: 'warning', 
      cssExceeded: 'exceeded', 
      counterText: '' 
     }; 

     var options = $.extend(defaults, options); 

     function calculate(obj){ 
      var count = $(obj).val().length; 
      var available = options.allowed - count; 
      if(available <= options.warning && available >= 0){ 
       $(obj).next().addClass(options.cssWarning); 
      } else { 
       $(obj).next().removeClass(options.cssWarning); 
      } 
      if(available < 0){ 
       $(obj).next().addClass(options.cssExceeded); 
      } else { 
       $(obj).next().removeClass(options.cssExceeded); 
      } 
      $(obj).next().html(options.counterText + available); 
     }; 

     this.each(function() {    
      $(this).after('<'+ options.counterElement +' class="' + options.css + '">'+ options.counterText +'</'+ options.counterElement +'>'); 
      calculate(this); 
      $(this).keyup(function(){calculate(this)}); 
      $(this).change(function(){calculate(this)}); 
     }); 

    }; 

})(jQuery); 

Answer 1

Попробуйте это. На самом деле полезно использовать это только для одного элемента ввода. Различные входы будут требовать различных контейнеров, переданных в

http://jsfiddle.net/GEJ29/

Использование:.

// Pass in a selector string for the container 
$('input').charCount({container:'#container'}); 

Плагин:

(function($) { 
    $.fn.charCount = function(options){ 
     // default configuration properties 
     var defaults = {  
      allowed: 150,  
      warning: 25, 
      css: 'counter', 
      counterElement: 'span', 
      cssWarning: 'warning', 
      cssExceeded: 'exceeded', 
      counterText: '', 
      container: undefined // New option, accepts a selector string 
     }; 

     var options = $.extend(defaults, options); 

     function calculate(obj,$cont) { 
       // $cont is the container, now passed in instead. 
      var count = $(obj).val().length; 
      var available = options.allowed - count; 
      if(available <= options.warning && available >= 0){ 
       $cont.addClass(options.cssWarning); 
      } else { 
       $cont.removeClass(options.cssWarning); 
      } 
      if(available < 0){ 
       $cont.addClass(options.cssExceeded); 
      } else { 
       $cont.removeClass(options.cssExceeded); 
      } 
      $cont.html(options.counterText + available); 
     }; 

     this.each(function() { 
     // $container is the passed selector, or create the default container 
      var $container = (options.container) 
        ? $(options.container) 
         .text(options.counterText) 
         .addClass(options.css) 
        : $('<'+ options.counterElement +' class="' + options.css + '">'+ options.counterText +'</'+ options.counterElement +'>').insertAfter(this); 
      calculate(this,$container); 
      $(this).keyup(function(){calculate(this,$container)}); 
      $(this).change(function(){calculate(this,$container)}); 
     }); 

    }; 
})(jQuery); 

Answer 2

mayby ​​специальные плагины JQuery может помочь в вашем случае, чтобы сократить код, как они вычисляют количество символов автоматически:

http://plugins.jquery.com/taxonomy/term/360 http://plugins.jquery.com/project/apTextCounter