jquery 字符串的长度 jquery限制字符长度

页面输入的时候总是需要限制输入字符的长度，网上找的需求总是和自己的不一样，自己写了一个，可以提示已经输入的长度，可以根据字节限制，可以自定义颜色，自定义动作，写得比较粗糙，又可以优化的地方，希望大家可以指出来

效果像这样

 

调用的时候很简单，几个配置就可以了

$("#content").artTxtCount({
            tipWrap : $("#contentTip"),
            maxNumber : 30,
            isBytes : true
        });

tipWrap 指定要显示提示的控件

验证也很简单

if ($("#content").isExceed()) {
            alert("超出最大长度");
            return;
        }

下面是可以支持的配置

var options = {
                tipWrap: null,                                    // 显示提示信息的控件id
                maxNumber: 100,                                  // 最大字数
                   minNumber: 0,                                    // 最小字数
                　isInit: true,                                     // 是否显示初始状态
                exceedColor: "red",                                // 超出最大字数后的颜色
                withinColor: "#595758",                            // 未超出最大字数的颜色
                isDisabled: false,                                 // 是否禁用提交按钮
                disabledWidget : null,                             // 需要禁用的控件ID
              attrTipName:"isExceed",                            // 是否超出限制(在目标控件上以attr添加,超出为true 反之false)
              defaultValue:"",                                  // 控件中的默认文本
                isBytes:false,                                    // 是否以bytes方式计算
                afterExceed:function() {},                        // 超出最大长度后执行
                beforeExceed:function() {}                        // 未超出最大长度执行
        };

源代码

1 (function($){
 2     // maxNumber:     最大输入字符
 3     $.fn.artTxtCount = function(passedOptions){
 4         var options = {
 5                 tipWrap: null,                                     // 显示提示信息的控件id
 6                 maxNumber: 100,                                    // 最大字数
 7                 minNumber: 0,                                    // 最小字数
 8                 isInit: true,                                    // 是否显示初始状态
 9                 exceedColor: "red",                                // 超出最大字数后的颜色
10                 withinColor: "#595758",                            // 未超出最大字数的颜色
11                 isDisabled: false,                                // 是否禁用提交按钮
12                 disabledWidget : null,                            // 需要禁用的控件ID
13                 attrTipName:"isExceed",                            // 是否超出限制,在目标控件上以attr添加,超出为true 反之false
14                 defaultValue:"",                                // 控件中的默认文本
15                 isBytes:false,                                    // 是否以bytes方式计算
16                 afterExceed:function() {},                        // 超出最大长度后执行
17                 beforeExceed:function() {}                        // 未超出最大长度执行
18         };
19         if (passedOptions) {
20             jQuery.extend(options, passedOptions);
21             this.data("txtCountDataSet",options);
22         };
23 
24         var obj = $(this),
25         getBytes = function () {
26             var cArr = this.match(/[^\x00-\xff]/ig);
27             return this.length + (cArr == null ? 0 : cArr.length);
28         },
29         _fire= function(event) {
30             options[event].call(this);
31         },
32         tipWrap = $(options.tipWrap);
33         // 统计字数
34         var count = function(){
35                 var btn = obj.closest('form').find(':submit'),
36                     val = obj.val(),
37                     length = val ? val.length : 0;
38                     // 是否禁用提交按钮
39                     disabled = {
40                         on: function(){
41                             if(options.isDisabled || options.disabledWidget){
42                                  if(options.disabledWidget){
43                                      $(options.disabledWidget).removeAttr("disabled");
44                                  }else{
45                                      btn.removeAttr('disabled');
46                                  }
47                             }
48                             obj.attr(options.attrTipName,"false");
49                          },
50                          off: function(){
51                              if(options.isDisabled || options.disabledWidget){
52                                  if(options.disabledWidget){
53                                      $(options.disabledWidget).attr("disabled",'disabled');
54                                  }else{
55                                      btn.attr('disabled', 'disabled');
56                                  }
57                              }
58                              obj.attr(options.attrTipName,"true");
59                          }
60                     };
61                 if(val==options.defaultValue){
62                     length = 0;
63                 }
64                 if(options.isBytes && val){
65                     length = parseInt(val.getBytes()/2);
66                 }
67                 if (length == 0) disabled.on();
68                 if(length <= options.maxNumber && length>= options.minNumber){
69                     //未超出最大长度
70                     if (length > 0) disabled.on();
71                     tipWrap.html("<span style='color:"+options.withinColor+"'>( "+length+" / "+options.maxNumber+" )</span>");
72                     _fire('beforeExceed');
73                 }else{
74                     //超出最大长度
75                     disabled.off();
76                     tipWrap.html("<span style='color:"+options.exceedColor+"'>( "+length+" / "+options.maxNumber+" )</span>");
77                     _fire('afterExceed');
78                 };
79             };
80             $(this).bind('keyup change', count);
81             if(tipWrap && options.isInit){
82                 count();
83             }
84             return this;
85     };
86     $.fn.isExceed= function(){
87         var options = this.data("txtCountDataSet");
88         if(options){
89             return this.attr(options.attrTipName)=="true";
90         }else{
91             return    false;
92         }
93     }
94     
95 })(jQuery);