欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>javascript教程>jquery教程

目录导航

jQuery输入字数提示插件 artTxtCount

美国西岸机房 发布于 2011-09-27  
jquery教程

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

零度科技承接各类PHP程序开发,DEDE插件制作业务,欢迎咨询QQ[674068714]

原文来自零度科技:http://www.ldisp.com/a/jquery/2011/artTxtCount.shtml

上一篇:jQuery插件开发介绍与方法
下一篇:jQuery右键菜单之-jeegoocontext

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

116

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理