artTxtCount是一个基于jQuery的简单输入字符统计与限制的插件,可以实现类似twitter、新浪微博、腾讯微博等字符统计的效果。

虽然网上已经有好几个同类型的插件了,但是封装过度,实际应用中总是有那么一丝牵绊,因为它们不能指定提示消息的容器。其实我们只需要一个简单的效果就可以了:

预览:http://www.planeart.cn/downs/artTxtCount/


/* tangbin - http://www.planeArt.cn - MIT Licensed */
(function($){
	// tipWrap: 	提示消息的容器
	// maxNumber: 	最大输入字符
	$.fn.artTxtCount = function(tipWrap, maxNumber){
		var countClass = 'js_txtCount',		// 定义内部容器的CSS类名
			fullClass = 'js_txtFull',		// 定义超出字符的CSS类名
			disabledClass = 'disabled';		// 定义不可用提交按钮CSS类名

		// 统计字数
		var count = function(){
			var btn = $(this).closest('form').find(':submit'),
				val = $(this).val().length,

				// 是否禁用提交按钮
				disabled = {
					on: function(){
						btn.removeAttr('disabled').removeClass(disabledClass);
					},
					off: function(){
						btn.attr('disabled', 'disabled').addClass(disabledClass);
					}
				};

			if (val == 0) disabled.off();
			if(val <= maxNumber){
				if (val > 0) disabled.on();
				tipWrap.html('\u8FD8\u80FD\u8F93\u5165 ' + (maxNumber - val) + ' \u4E2A\u5B57');
			}else{
				disabled.off();
				tipWrap.html('\u5DF2\u7ECF\u8D85\u51FA ' + (val - maxNumber) + ' \u4E2A\u5B57');
			};
		};
		$(this).bind('keyup change', count);

		return this;
	};
})(jQuery);