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

<!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. 牛客国庆集训派对Day3 I Metropolis

    Metropolis 思路: 多源点最短路 只要两个不同源点的最短路相遇,我们就更新两个源点的答案 代码: #pragma GCC optimize(2) #pragma GCC optimize(3 ...

  2. python中的break\return\pass\continue用法

    continue: def func(): for i in range(1,11): if i % 2 == 0: continue # 作用是当符合上面的if判语句后,就直接跳过之后的语句,也就是 ...

  3. arcgis 浅入

    首先声明,此文只是用于学习,非商业用途!!20181226谷子弟留   有朋友需要用arcgis来学习分析图块,实现图块的分类和数据分析和统计. 于是网上找了找资源. http://pan.baidu ...

  4. FetchType.LAZY和FetchType.EAGER什么区别

    1.FetchType.LAZY:懒加载,加载一个实体时,定义懒加载的属性不会马上从数据库中加载. 2.FetchType.EAGER:急加载,加载一个实体时,定义急加载的属性会立即从数据库中加载. ...

  5. tchart example

    Random random = new Random(); // Color SeriesColor; int SeriesIndex=0; tChart1.Series.Clear(); Steem ...

  6. 57 ORM多表查询

    多表查询from django.db import models# Create your models here. class Author(models.Model): nid = models. ...

  7. jquery中的全选、反选、全不选和单删、批删

    HTML页面 <!doctype html><html lang="en"><head> <meta charset="UTF- ...

  8. ubuntn 安装python3 及 django及pip3

    1.sudo apt-get install python3-pip    安装pip3 2.sudo pip3 install django   通过pip3安装django 3. sudo apt ...

  9. SWUST OJ(954)

    单链表的链接 #include <stdio.h> #include <stdlib.h> typedef struct LinkNode //单链表节点结构的定义 { cha ...

  10. 背包DP 存在异或条件的状态转移问题

    题目链接 分析:有大佬说可以用线性基写,可惜我不会,这是用DP写的 题目明确说明可到达的位置只与能值有关,和下标无关,我们就可以排个序,这样每个数可以转移的区间就是它的所有后缀 我们可以用dp[i][ ...