textarea输入文字限制个数

Posted 2021-03-08 duqianqian

　说明：

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 = $;
 })