轻量级输入字数提示jQuery插件 – artTxtCount
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);
本文出自 传播、沟通、分享,转载时请注明出处及相应链接。
本文永久链接: https://www.nickdd.cn/?p=756