zoukankan      html  css  js  c++  java
  • 仿微博字数提示小插件

    本来是自己写了一个的,然后发现这个的扩展性比我写的要方便,所以就借花献佛啦~~原出自找不到了

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <script type="text/javascript" src="http://www.liehuo.net/uploads/common/js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
    (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
    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 {
    	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 {
    	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.liehuo.net" target="_blank" title="planeArt">www.liehuo.net</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>
      jQuery文本框实时显示可输入字数并可禁止输入提示超出,强!
      <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>
    
  • 相关阅读:
    ABAP接口用法
    监听textarea数值变化
    The first step in solving any problem is recognizing there is one.
    Wrinkles should merely indicate where smiles have been.
    God made relatives.Thank God we can choose our friends.
    Home is where your heart is
    ABAP跳转屏幕
    Python 工具包 werkzeug 初探
    atom通过remote ftp同步本地文件到远程主机的方法
    Mongodb学习笔记一
  • 原文地址:https://www.cnblogs.com/mofish/p/2217860.html
Copyright © 2011-2022 走看看