jQuery文本框实时显示输入字数超出则禁止输入的实现代码__artTxtCount_disabled_demo_function_maxNumber_

当前位置: 编程技术>jquery

jQuery文本框实时显示输入字数超出则禁止输入的实现代码

来源: 互联网发布时间：2014-09-03

本文导语: artTxtCount 是一个jQuery版轻量级输入字数提示插件，即限制字数，当输入了一定的字符，它会提示还可以输入多少字符。此插件在超出字数限制时，会禁止输入。以下代码，运行后，请称刷新才能显示效果。代码示例: ...

artTxtCount 是一个jQuery版轻量级输入字数提示插件，即限制字数，当输入了一定的字符，它会提示还可以输入多少字符。
此插件在超出字数限制时，会禁止输入。

以下代码，运行后，请称刷新才能显示效果。

代码示例:

artTxtCount demo by liehuo.net

/* tangbin - http://www. - 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 0) disabled.on();
tipWrap.html('u8FD8u80FDu8F93u5165 ' + (maxNumber - val) + ' u4E2Au5B57');
}else{
disabled.off();
tipWrap.html('u5DF2u7ECFu8D85u51FA ' + (val - maxNumber) + '
u4E2Au5B57');
};
};
$(this).bind('keyup change', count);
return this;
};
})(jQuery);

// demo
jQuery(function(){
// 批量
$('.autoTxtCount').each(function(){
$(this).find('.text').artTxtCount($(this).find('.tips'), 140);
});
// 单个
$('#test').artTxtCount($('#test_tips'), 10);
});

/* demo */
body { font-size:75%; font-family:'微软雅黑'; }
#demo { width:500px; }
#demo .help, #demo .help a { color:#999; }
#demo form { margin:20px 0; padding:8px; background:#F4F4F4; border:1px solid #EDEDED; }
#demo .tips { color:#999; padding:0 5px; }
#demo .tips strong { color:#1E9300; }
#demo .tips .js_txtFull strong { color:#F00; }
#demo textarea.text { width:474px; }

artTxtCount - 轻量级输入字数提示插件 - www.

$('#text').artTxtCount($('#text_tips'), 10);

by tangbin. www.

提交