textarea输入文字限制个数

　说明：

w-count固定为数字部分的class

textarea-active为超出最大输入文字个数报错信息的class

html 部分：

<div class="wrap wrapper">

      <div class="tp-form-textarea tp-form-input-unname">

        <div class="textarea-box" data-textarea="textarea" data-length="20">

          <textarea name="" id="" cols="5" rows="10" placeholder="默认文字" data-cols="5"></textarea>

          <p class="w-count" data-length="number"><em>0</em>/30</p>

        </div>

      </div>

      <div class="tp-form-textarea tp-form-input-unname">

        <div class="textarea-box" data-textarea="textarea-1" data-length="20">

          <textarea name="" id="" cols="3" rows="10" placeholder="默认文字" data-cols="3"></textarea>

          <p class="w-count" data-length="number-1"><em>0</em>/302</p>

        </div>

      </div>

  </div>

js部分：

/*

 * @name        tab.js tab切换功能

 */

 define(function(require, exports, module) {

    var TextArea = function(ele,config){

        this.area = $.extend({

             triggerFocus:'focus',

             triggerBlur:'blur',

             triggerInput:'input',

             $content: '.textarea-box',

             $textareaBox:"[data-textarea*='textarea']",

             $wCount:"[data-length *='number']",

             $value : '',

             $maxlength:100

        }, config);

        this.init(ele);

    };

    TextArea.prototype = {

        constructor:TextArea,

        init: function(ele){

          var self = this;

          self.$ele = ele;

          //this就是代表当前作用域对象的引用。如果在全局范围this 就代表window 对象，如果在构造函数体内，就代表当前的构造函数所声明的对象。

          self.$textareaBox = $(self.area.$content || self.area.$textareaBox);

          self.renderTab();

        },

        cssStatus:{

          actives: 'textarea-active', //给聚焦的盒子添加class

          warnimg: 'count-error'    //给报错的盒子添加红色文字

        },

        renderTab:function(){

          var self = this;

            self.$textareaBox.find("textarea").on(self.area.triggerFocus, function(){

                var that = $(this);

                     _parent = that.parents(".textarea-box");

               _parent.addClass(self.cssStatus.actives);

             }).on(self.area.triggerBlur, function(){

               var _that = $(this);

                 self.$textareaBox.removeClass(self.cssStatus.actives);

             }).on(self.area.triggerInput, function(){   //input事件是时时触发

               var _this =  $(this),

                   _parent = _this.parent(),

                   val = $.trim(_this.val());

                   wCount = _parent.find((self.area.$wCount || ".w-count")).text(); //获取文字最大数

                   if(wCount == '' || wCount =="undefined" || wCount == null){

                      maxlength = self.area.$maxlength;

                   }else{

                     var  wNum = wCount.lastIndexOf("\/"),

                          maxlength = wCount.substring(wNum+1,wNum.length);

                   }

                   if(val.length > maxlength){

                     _parent.addClass(self.cssStatus.warnimg)

                   }else{

                     _parent.removeClass(self.cssStatus.warnimg)

                   }

                   _parent.find('.w-count em').text(val.length)

           });

        }

    }

    $.extend($.fn,{

        textArea:function(config){

            return new TextArea($(this), config || {});

        }

    });

    module.exports = $;

 })