ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter

ASP.NET jQuery 实例实例13 原创原创jQuery文本框字符限制插件文本框字符限制插件-

TextArea Counter

节介绍一个自己写的jQuery文本框字符限制插件，至于如何写插件，我这里就不多讲了，可以查看相关介绍，

这里主要介绍下该插件的功能

•可限制最大输入字符长度

•可设置字符截取速度

•可自定义提示信息文本样式(可以改进自定义文本内容)

该插件统计英文字符和中文的长度是一样的。

options = $.extend({

maxlength: 140, // 定义一个最大输入长度变量,初始化为500

speed: 15, // 定义删除字符的速度变量

msgstyle: "font-family:Arial;font-size:small;color:Gray;small;text-align:right;margin-top:3px;", // 提示信息显示样式

msgNumStyle: "font-weight:bold;color:Gray;font-style:italic;font-size:larger;" // 提示信息里面剩余长度的样式

}, options);

var $msg = $("<div style='" + options.msgstyle + "'></div>");

// 在文本框框后面动态加载一个提示信息容器

$textArea.after($msg);

// 添加keypress事件用来判断当前内容是否还可输入

}

}).keyup(function () { // 添加keyup事件用来计算剩余输入字并显示

var curlength = this.value.length;

$msg.html("").html("还能输入<span style='" + options.msgNumStyle + "'>" + (options.maxlength - curlength) + "</span>字");

var init = setInterval(function () {

// 如果输入的内容大于设置的最大长度，内容按设置的速度自动截取

if ($textArea.val().length > options.maxlength) {

$textArea.val($textArea.val().substring(0, options.maxlength));

$msg.html("").html("还能输入<span style='" + options.msgNumStyle + "'>" + options.maxlength + "</span>字");

}

});

// 首次加载现在可输入字符长度提示信息

$msg.html("").html("还能输入<span style='" + options.msgNumStyle + "'>" + options.maxlength + "</span>字");

return this;

}

});

})(jQuery);

直接把上面代码复制保存到jquery.textareacounter.js.

Demo:

现在我们来看下如何使用该插件，首先要引用该插件，代码如下：