轻量级输入字数提示jQuery插件

最新推荐文章于 2025-07-30 09:53:50 发布

转载最新推荐文章于 2025-07-30 09:53:50 发布 · 751 阅读

javaEE之javascript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个轻量级的输入字数提示插件artTxtCount，并提供了详细的使用示例代码，展示了如何设置最大输入字符数及实时更新字数提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

(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('<span class="' + countClass + '">\u8FD8\u80FD\u8F93\u5165 <strong>' + (maxNumber - val) + '</strong> \u4E2A\u5B57</span>');
                        }else{
                                disabled.off();
                                tipWrap.html('<span class="' + countClass + ' ' + fullClass + '">\u5DF2\u7ECF\u8D85\u51FA <strong>' + (val - maxNumber) + '</strong> \u4E2A\u5B57</span>');
                        };
                };
                $(this).bind('keyup change', count);
                
                return this;
        };
})(jQuery);

一下是DEMO

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>artTxtCount demo</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
/* 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('<span class="' + countClass + '">\u8FD8\u80FD\u8F93\u5165 <strong>' + (maxNumber - val) + '</strong> \u4E2A\u5B57</span>');
}else{
disabled.off();
tipWrap.html('<span class="' + countClass + ' ' + fullClass + '">\u5DF2\u7ECF\u8D85\u51FA <strong>' + (val - maxNumber) + '</strong> \u4E2A\u5B57</span>');
};
};
$(this).bind('keyup change', count);

return this;
};
})(jQuery);
</script>


<script type="text/javascript">
// demo
jQuery(function(){

// 批量
$('.autoTxtCount').each(function(){
$(this).find('.text').artTxtCount($(this).find('.tips'), 140);
});

// 单个
$('#test').artTxtCount($('#test_tips'), 10);

});
</script>
<style>
/* 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; }
</style>
</head>


<body>
<div id="demo">
  <h1>artTxtCount - 轻量级输入字数提示插</h1>
  <p class="help">$('#text').artTxtCount($('#text_tips'), 10);</p>
  <p class="help">by tangbin. <a href="http://www.planeArt.cn" target="_blank" title="planeArt">www.planeArt.cn</a></p>
  <form class="autoTxtCount" action="" method="get">
    <div>
      <textarea class="text" name="" cols="50" rows="3"></textarea>
    </div>
    <div>
      <button type="submit">提交</button>
      <span class="tips"></span> </div>
  </form>
  <form class="autoTxtCount" action="" method="get">
    <div>
      <textarea class="text" name="" cols="50" rows="3"></textarea>
    </div>
    <div>
      <button type="submit">提交</button>
      <span class="tips"></span> </div>
  </form>
  <form action="" method="get">
    <input class="text" id="test" name="" type="text" />
    <span id="test_tips" class="tips"></span><br />
    <button type="submit">提交</button>
  </form>
</div>
</body>
</html>

DEMO代码保存即可运行