zoukankan      html  css  js  c++  java
  • 文本域字数限制统计(不区分中英文 符号)

    (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);
                        }
                    });

  • 相关阅读:
    图解Go里面的互斥锁mutex了解编程语言核心实现源码
    day04 NTFS安全权限 | 文件共享服务器
    day03 用户与组管理 | 远程管理
    关于VMware的一些资源|IOS|序列号
    day03 批处理
    day02-IP地址详解
    test1
    simulink产生周期矩形波和8421码
    矩阵连乘问题的算法复杂度的计算--卡塔兰数(Catalan数)的数学推导和近似公式
    找出"吸血鬼数"(Java)
  • 原文地址:https://www.cnblogs.com/whlhaikuotiankong/p/3401221.html
Copyright © 2011-2022 走看看