文本域字数限制统计(不区分中英文 符号)

(function($){
  $.fn.limitTextarea = function(opts){
      var defaults = {
        maxNumber:140,//允许输入的最大字数
        position:'top',//提示文字的位置,top:文本框上方,bottom:文本框下方
        onOk:function(){},//输入后,字数未超出时调用的函数
        onOver:function(){}//输入后,字数超出时调用的函数   
      }
      var option = $.extend(defaults,opts);
      this.each(function(){
          var _this = $(this);
          var info = '<div id="tip">您可以输入<b>' + (option.maxNumber - _this.val().length + 7) + '</b>个字</div>';
          var fn = function(){
            var extraNumber = option.maxNumber - _this.val().length;
            var $info = $('#tip');
            if(extraNumber>=0){
              $info.html('还可以输入<b>'+extraNumber+'</b>个字');    
              option.onOk();
            }
            else{
              $info.html('已经超出<b style="color:red;">'+(-extraNumber)+'</b>个字');
              option.onOver();
            }  
          };
          switch(option.position){
              case 'top' :
                _this.before(info);
              break;
              case 'bottom' :
              default :
                _this.after(info);
          }
          //绑定输入事件监听器
          if(window.addEventListener) { //先执行W3C
            _this.get(0).addEventListener("input", fn, false);
          } else {
            _this.get(0).attachEvent("onpropertychange", fn);
          }
          if(window.VBArray && window.addEventListener) { //IE9
            _this.get(0).attachEvent("onkeydown", function() {
              var key = window.event.keyCode;
              (key == 8 || key == 46) && fn();//处理回退与删除
            });
            _this.get(0).attachEvent("oncut", fn);//处理粘贴
          }          
      });   
  }    
})(jQuery)

 

调用函数:
                $("#replyTxta").limitTxta({
                    maxNumber: 70,   //最大字数
                    position: 'bottom',   //提示文字的位置,top:文本框上方,bottom:文本框下方
                    onOk: function () {
                        $('#replyTxta').css('background-color', 'white');   //输入后,字数未超出时调用的函数
                        $('#sendBtn').attr('disabled', false);
                    },
                    onOver: function () {
                        $('#replyTxta').css('background-color', 'lightpink');   //输入后,字数超出时调用的函数,这里把文本区域的背景变为粉红色
                        $('#sendBtn').attr('disabled', true);
                    }
                });

转载于:https://www.cnblogs.com/whlhaikuotiankong/p/3401221.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值