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

<!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. <script src="../build/browser.min.js"></script> 是用来里面babel工具把ES6的语法转成ES5

    <!DOCTYPE html> <html> <head> <script src="../build/react.js">< ...

  2. Asp.net core 学习笔记 ( User Secrets )

    参考 : http://cnblogs.com/nianming/p/7068253.html https://docs.microsoft.com/en-us/aspnet/core/securit ...

  3. 动态规划-独特的子字符串存在于Wraparound String总个数 Unique Substrings in Wraparound String

    2018-09-01 22:50:59 问题描述: 问题求解: 如果单纯的遍历判断,那么如何去重保证unique是一个很困难的事情,事实上最初我就困在了这个点上. 后来发现是一个动态规划的问题,可以将 ...

  4. selenium chrome 自动加载flash

    #coding:utf-8from selenium import webdriverfrom selenium.webdriver.support.select import Selectfrom ...

  5. CSS Hack 技巧

    IE Hack IE系列浏览器的hack大略如下: _nowamagic:1px;———–ie6 *nowamagic:1px;———–ie7 nowamagic:1px\0;———-ie89 now ...

  6. hadoop集群添加新节点

    0.说明 Hadoop集群已经运行正常,现在新买了一些机子,要加入到集群里面增加新的节点.以下就是增加的过程. 1.配置运行环境 安装与master和其他slave相同的java环境,jdk版本要相同 ...

  7. 创建xml树

    XMLElement 节点XMLDocument 节点的CUID操作 XMLNode 抽象类 操作节点 (XMLElement XMLDocument ) XElement xElement = ne ...

  8. 函数使用九：CAT_CHECK_RFC_DESTINATION

    此函数是用来检查RFC DESTINATION是否存在,RFC是否通 Import RFCDESTINATION          RFC目标  类型:RSCAT-RFCDEST Export MSG ...

  9. mybatis的update使用选择

    更新后台设置时,会分多个页面更新同一个表中的数据,愿想是尽量减少sql请求数据量并且减少重复代码. 比如博客园的: 假如只有一个用户信息表,这样的话每个页面只更新部分字段. 这种情况下的更新推荐在xm ...

  10. 在ASP.NET MVC 框架中调用 html文件及解析get请求中的参数值

    在ASP.NET MVC 框架中调用 html文件: public ActionResult Index() { using (StreamReader sr = new StreamReader(P ...