Cacher is the code snippet organizer for pro developers

#CountDownString Class

最大文字数からカウントダウン型の文字数カウンター

Module

/**
 * CountDownString Class Description v1.2.1
 * @fileoverview 最大文字数からカウントダウン型の文字数カウンター
 *    対応ブラウザはモダンブラウザ（IE8以上）
 */
var CountDownString = (function (){
  var constructor = function () {
    this.$el = {};
    this.$textarea = {};
    this.$counter = {};
    this.$countDefault = {};
    this.$countResult = {};
    this.maxLength = 0;
    this.textareaClass = 'js-countDownString-countEl';
    this.errorClass = 'has-countError'; //* エラークラス */
  };
  var proto = constructor.prototype;
  /**
   * @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){
      var stringsLength = this.maxLength -this.$textarea.val().length;
      this.count(stringsLength);
    }
    this.setEvents();
    return this;
  };
  proto.setEl = function () {
    this.$textarea = this.$el.find('.' +this.textareaClass);
    this.$counter = this.$el.find('.js-countDownString-counter');
    this.$countDefault = this.$el.find('.js-countDownString-countDefault');
    this.$countResult = this.$el.find('.js-countDownString-countResult');
    return this;
  };
  proto.reset = function () {
    this.$counter.text(this.maxLength);
    this.$countDefault.removeClass('hide');
    this.$countResult.addClass('hide');
    this.$countResult.removeClass(this.errorClass);
    return this;
  };
  proto.check = function () {
    var stringsLength = this.maxLength -this.$el.find('.' +this.textareaClass).val().length;
    this.count(stringsLength);
    return this;
  };
  proto.count = function (stringsLength) {
    this.$counter.text(stringsLength);
    if (stringsLength === this.maxLength) {
      this.$countDefault.removeClass('hide');
      this.$countResult.addClass('hide');
    }else{
      this.$countDefault.addClass('hide');
      this.$countResult.removeClass('hide');
    }
    /** maxLength以上の場合はエラークラスを追加 */
    if (stringsLength < 0) {
      this.$countResult.addClass(this.errorClass);
    }else{
      this.$countResult.removeClass(this.errorClass);
    }
    return this;
  };
  proto.setEvents = function () {
    var that = this;
    this.$textarea.blur(function () {
      var currentLength = that.maxLength -that.$textarea.val().length;
      that.count(currentLength);
      return this;
    });
    this.$textarea.on('keyup keydown keypress change', function () {
      var currentLength = that.maxLength -that.$textarea.val().length;
      that.count(currentLength);
      return this;
    });
    return this;
  };
  return constructor;
})();

Usage

HTML

<div id="js-countDownString">
  <textarea class="js-countDownString-countEl">sample</textarea>
  <p class="js-countDownString-countDefault">100文字まで</p>
  <p class="js-countDownString-countResult hide">残り<span class="js-countDownString-counter"></span>文字</p>
</div>

JS

var countDownString = new CountDownString();
countDownString.set('#js-countDownString', 100);