• 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 = $;
     })
  • 相关阅读:
    《游戏引擎构架Game Engine Architecture》略读笔记
    Visual Studio快速入门(大纲)
    Linux课程学习 第四课
    Linux课程学习 第三课
    Linux课程学习 第二课
    vmware虚拟机安装centos7.3
    Win7 Linux双系统,恢复Linux启动项
    Java中Collection、Map常用实现类研究分析
    数据库计算每个表所占空间和记录数
    tomcat中部署多个项目,webAppRootKey 参数配置
  • 原文地址:https://www.cnblogs.com/restart77/p/12336994.html
走看看 - 开发者的网上家园