Cacher is the code snippet organizer for pro developers

#CountUpString Class

カウントアップ型の文字数カウンター

Class (Protoype)

/**
 * countUpString Class Description v1.2.0
 * @fileoverview カウントアップ型の文字数カウンター
 *    対応ブラウザはモダンブラウザ（IE8以上）
 * @param {Object} el - 全てのDOM要素をラップした要素（必須）
 * @param {Number} maxLength - 最大文字数（必須）
 */
var countUpString = (function (){
  var constructor = function () {
    this.$el = {};
    this.$textarea = {};
    this.$counter = {};
    this.limitedLength = 999; //* カウント可能な最大文字数。これ以上はカウントされない  */
    this.errorClass = 'has-countError'; //* エラークラス */
  };
  var proto = constructor.prototype;
  /**
   * Entry point
   * @param {Object} el - 全てのDOM要素をラップした要素（必須）
   * @param {Number} maxLength - 最大文字数（必須）
   */
  proto.set = function (el, maxLength) {
    if(maxLength){
      this.maxLength = maxLength;
    }else{
      throw new Error('maxLength is Required');
    }
    if(el){
      this.$el = $(el);
      this.setEl();
    }else{
      throw new Error('el is Required');
    }
    if(this.$textarea.length > 0){
      this.count(this.$textarea.val().length);
    }
    this.setEvents();
    return this;
  };
  proto.setEl = function () {
    this.$textarea = this.$el.find('.js-countUpString-countEl');
    this.$counter = this.$el.find('.js-countUpString-counter');
    return this;
  };
  proto.setEvents = function () {
    var that = this;
    this.$textarea.on('keyup keydown keypress change', function () {
      var currentLength = that.$textarea.val().length;
      that.count(currentLength);
      return this;
    });
    return this;
  };
  proto.count = function (stringsLength) {
    if(stringsLength <= 0){
      /** 0表示 */
      this.$counter.text(0);
    }else if(stringsLength > this.limitedLength){
      /** limitedLength以上の場合は固定表示 */
      this.$counter.text(this.limitedLength);
    }else{
      this.$counter.text(stringsLength);
    }
    if(stringsLength > this.maxLength){
      /** maxLength以上の場合はエラークラス付与 */
      this.$counter.addClass(this.errorClass);
    }else{
      this.$counter.removeClass(this.errorClass);
    }
    return this;
  };
  return constructor;
})();

Usage

###HTML

<div id="js-countUpString">
    <textarea class="js-countUpString-countEl"></textarea>
    <p>文字数: <span class="js-countUpString-counter">0</span>/500</p>
</div>

###JS

var countUpString = new CountUpString();
countUpString.set('#js-countUpString', 500);