基于jquery的输入字数统计小控件

最近项目中加入社区话题功能，发布话题时多处用到对于文本框输入字数进行统计的功能，因此写了一个小控件供大家使用。

主要实现功能：

1、统计当前文本域、输入框已输入字符数。

2、计算剩余可以输入字符数。

3、当输入字符达到上限时切换提示样式，给予提示。

4、支持传入自定义事件在输入字数达到某个数值时执行。

5、区分中英文字符统计。

效果图如下：

/**
* author:gew
*
* 本方法用于实时统计输入框已输入的字数
*
* 调用方法示例：
* $("#xxx").checkInputNum({
*     "maxNum":1000,                   输入字符上限
*  "nowNumTip":$("span .nownum"),      指定显示已输入多少字符的dom元素
*  "restNumTip":$("span .restnum"),    指定显示可输入多少字符的dom元素
*  "restTipClass":"red",               字数已经达到上线时改变restNumTip的样式
*     "checkType":"En"                 指定统计的单位，CN:中文字符 EN：英文字符
* });
*
*/

if (!!window.jQuery) {
(function($) {
$.fn.extend({checkInputNum:function(options) {
var option = {
maxNum : 1000,          //用户可输入最大字符数
triggerNum:1000,        //当输入数量达到某个值时触发一个事件
triggerFunc:null,       //触发执行的事件
nowNumTip:null,         //用于提示当前已输入字数的dom对象
restNumTip:null,        //用于提示还可以输入字数的dom对象
restTipClass : null,    //已输入字数等于最大输入字数时改变对象的class
checkType:"CN"          //字数统计类型 CN：中文，EN：英文
};
if (typeof options === "object") {
$.extend(option, options);
}
if(isNaN(option.maxNum)){
return false;
}
var _this = this;
var _result = true;
var _nowNum = 0;
var _restNum = 0;
var _nowStrLen = 0;
var _maxLength = option.checkType == "CN"? option.maxNum*2:option.maxNum;
var _nowStr = "";

$(_this).bind("keyup change",function(){
_nowStr = checkLen(_this.val(),_maxLength);
_nowNum = getNum(_nowStrLen, option.checkType);
_restNum = getNum(_maxLength-_nowStrLen, option.checkType);
if(_restNum<=option.triggerNum && typeof(option.triggerFunc)=="function"){
option.triggerFunc();
}
//判断已输入字符数是否超出最大值
_result =  _nowNum >= option.maxNum;
if(!_result){//未超出界限
if(option.nowNumTip){
$(option.nowNumTip).html(_nowNum);
}
if(option.restNumTip){
$(option.restNumTip).html(_restNum);
if(option.restTipClass&&typeof option.restTipClass =="string"){
$(option.restNumTip).removeClass(option.restTipClass);
}
}

}else{//超出界限
$(_this).val(_nowStr);
if(option.nowNumTip){
$(option.nowNumTip).html(_nowNum);
}
if(option.restNumTip){
$(option.restNumTip).html(_restNum);
if(option.restTipClass&&typeof option.restTipClass =="string"){
$(option.restNumTip).addClass(option.restTipClass);
}
}
}
});

if($(_this).val()!==""){
$(_this).trigger("change");
}

//校验字符串长度是否合法，若不合法则截取字符串
function checkLen(str,len){
var num = getBytes(str);
if(parseInt(num)>=len){
_nowStrLen = len;
return subStr_func(str,len);
}else{
_nowStrLen = num;
return str;
}
}

//根据统计类型判断获取字符数
function getNum(num,chType){
if(isNaN(num)){
return 0;
}else{
if(chType=="CN"){
return Math.ceil(num/2);
}else{
return num;
}
}
}

//获取字符串字节数
function getBytes(str) {
var byteLen = 0, len = str.length;
if (str) {
for ( var i = 0; i < len; i++) {
if (str.charCodeAt(i) > 255) {
byteLen += 2;
} else {
byteLen++;
}
}
return byteLen;
} else {
return 0;
}
}

//截取字符串使其长度不大于指定长度
function subStr_func(str, len) {
if (!str || !len) {
return "";
}
var a = 0;
var i = 0;
var temp = '';
for (i = 0; i < str.length; i++) {
if (str.charCodeAt(i) > 255) {
a += 2;
} else {
a++;
}
if (a > len) {
return temp;
}
temp += str.charAt(i);
}
}
}});

})(jQuery);
}

2012-05-14