工作中用到，需要批量处理下

<!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>轻量级输入字数提示jQuery插件-B5教程网 www.bcty365.com</title>

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="js/jQuery.artTxtCount.js"></script>

<script>

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

    margin: 0px auto;

}

#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>

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

jquery插件artTxtCount输入字数限制,并提示剩余字数的更多相关文章

  1. JQ限制输入字数，并提示剩余字数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jQuery插件–jqueryflexselect下拉框自动提示

    原理:用户在文本框中输入一个字符(或输入字符的首字母),然后利用ajax,从后台服务器中进行检索,组装后并返回到页面,页面通过javascript进行解析,在一个层里面显示出来. 类似的效果如下: & ...

  3. android中实现在矩形框中输入文字，可以显示剩余字数的功能

    虽然这两个功能都比较简单,但是在实际app开发中真的很常见,特别是显示字数或剩余字数这个功能 如下图: 要实现上面的功能,需要做到三点: 1.实现矩形框布局 思路就是矩形框作为整个布局的一个backg ...

  4. jquery插件--在input下输入密码时提示大写锁定键

    //密码大写输入提示 function capitalTip(id){ $('#' + id).after('<div class="capslock" id="c ...

  5. 推荐60个jQuery插件(转)

    jQuery插件jQuery Spin Button自定义文本框数值自增或自减 jQuery插件JQuery Pager分页器实现javascript分页功能 jQuery插件FontSizer实现J ...

  6. jquery插件——仿新浪微博限制输入字数的textarea

    内容链接地址:http://www.cnblogs.com/jone-chen/p/5213851.html: <!DOCTYPE html> <html> <head& ...

  7. 分享一个仅0.7KB的jQuery文本框输入提示插件

    由于项目需要,找过几个jQuery文本框输入提示插件来用,但总是有不满意的地方,要么体积较大,要么使用不便,要么会出现把提示文字作为文本框的值的情况.于是我们自己的开发团队制作了这个最精简易用的输入提 ...

  8. PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能

    XHTML 首先将jquery库和相关ui插件,以及css导入.一共引用三个 jquery ,jquery_ui.js,jquery-ui.css 三个文件,不同版本小哥可能稍有差异(最后注意ajax ...

  9. jquery插件：textarea的字数提示、textBox的文字提示

    引用文件:    <script src=”/TextTip/TextTip.js” type=”text/javascript”></script> 一.textarea的字 ...

随机推荐

  1. cacheManager ABP中的缓存

    ABP的缓存是key---(key,value) 形式存储 GetCache获取到的是ICache类型   如果知道这个ICache的具体类型  可以直接强转Icache.AsTyped<int ...

  2. Mac Anaconda 简单介绍 -- 环境管理

    Anaconda Anaconda(官方网站)就是可以便捷获取包且对包能够进行管理,同时对环境可以统一管理的发行版本.Anaconda包含了conda.Python在内的超过180个科学包及其依赖项. ...

  3. java8新特性（二）_lambda表达式

    最近一直找java8相关新特性的文章,发现都太没有一个连贯性,毕竟大家写博客肯定都有自己的侧重点,这里找到一本书,专门介绍java8新特性的,感觉大家可以看看<写给大忙人看的JavaSE8> ...

  4. ubuntu 16.04 下安装smplayer视频播放器

    安装平台:ubuntu 16.04 1.sudo apt-add-repository ppa:rvm/smplayer 2.sudo apt-get update 3.sudo apt-get in ...

  5. Getting started with Processing 第十三章——延伸(1)

    导入库: 导入库的名称为:import processing.libName.* 声音 播放声音 支持的格式:wav,aiff,mp3声明: SoundFile blip;创建:blip = new ...

  6. python3 语法小结

    (1) 关键字 # -*- coding: utf-8 -*- #!/usr/bin/python3 """ 1.关键字(保留字) ['False', 'None', ' ...

  7. 无法访问SVN历史记录的问题

      今天在eclipse中发现无法访问SVN的历史记录,提示条目不可读,截图如下: 用小乌龟客户端试了试也不行,截图如下: 最后解决办法是在SVN服务器上将代码仓库中conf目录下的svnserve. ...

  8. dp练习2

    1, CF 808G Anthem of Berland 2, CF 741B Arpa's weak amphitheater and Mehrdad's valuable Hoses

  9. 2018 USP Try-outsF - Optimizing Transportation in Portugal

    题意:给你一副无向图,求使s到t删掉一条的最短路最大的长度 题解:先预处理s,t到每个点的最短路,二分答案,对于一条边,如果选中这条边,那么对于s->u+u->v+v->t或者s-& ...

  10. kohana task 编写计划任务

    kohana 框架  我们经常使用gleez作为我们二次开发. 收先我们要把文件建在Task文件夹下,比如新建文件为:testcron <?phpdefined('SYSPATH') or di ...