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

<!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. 人脸识别demo使用教程

    最近在研究虹软家的arcface 人脸识别 demo,现在就给大家分享一下官方的demo**工程如何使用? **1.下载代码:git clone https://github.com/asdfqwra ...

  2. JAVA基础知识总结：十三

    测试用一个字符串常量创建一个字符串对象 1.获取这个字符串的长度 2.获取任意长度的子串 3.判断这个字符串是否为空 4.将这个字符串中的小写字母转化为大写字母 5.获取某个字符在字符串中第一次出现的 ...

  3. 安装xmlspy之后，链接及邮箱等都用这个软件打开，怎样取消？

    安装xmlspy之后,链接及邮箱等都用这个软件打开,怎样取消? 安装xmlspy之后,大部分的链接就会用这个软件打开,比较糟心.所以尝试很多的方法,终于解决了. (1)打开控制面板,找到默认程序: ( ...

  4. Lab 3-3

    Execute the malware found in the file Lab03-03.exe while monitoring it using basic dynamic analysis ...

  5. (Go rails)使用Rescue_from(ActiveSupport:Rescuable::ClassMethods)来解决404（ActiveRecord::RecordNotFound）❌

    https://gorails.com/episodes/handle-404-using-rescue_from?autoplay=1 我的git: https://github.com/chent ...

  6. Confluence 6 空间权限和链接到相关的空间

    空间权限 每一个空间将会创建一个默认的权限.创建空间的用户将会自动具有空间管理员(space admin)的权限,这个的意思是你可以为其他用户和用户组赋予空间访问和管理的权限. 请查看 Space P ...

  7. nodejs安装、环境配置和测试

    nodejs下载 https://nodejs.org/en/ nodejs安装 双击下载的nodejs,可自定义安装路径,安装模块部分直接next即可安装. 检查是否安装 win+R输入cmd,打开 ...

  8. Fiddler简介及web抓包

    1.Fiddler界面如下   2.Fiddler开关 界面左下角或点击F12控制Fiddler开关,开关是“Capturing”: 启动之后,Fiddler代理永远是开着的.     3.浏览器代理 ...

  9. 利用phpqrcode二维码生成类库和imagecopymerge函数制拼接图片的经验

    前期准备 引入phpqrcode类库(下载地址:https://sourceforge.net/projects/phpqrcode/) PHP开启GD扩展库支持 1.利用phpqrcode生成二维码 ...

  10. 第二阶段——个人工作总结DAY05

    1.昨天做了什么:将值由一个活动传递到另一个活动. 2.今天打算做什么:打算制作修改密码的界面. 3.遇到的困难:因为是任务是分开的,所需要获取的值是通过另一个活动(不是自己任务)的传递过来的,所以还 ...