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