一个文本框记数器

最新推荐文章于 2024-09-23 08:37:48 发布

weixin_33859665

最新推荐文章于 2024-09-23 08:37:48 发布

阅读量65

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/liuxx/archive/2012/09/14/lenTracer.html

版权

/*
*长度跟踪器
*v2.1.0
*bind2Id:用于显示长度变化的元素的id
*max:最大长度
*msgWrap:提示信息(必须要有一个"-"占位符)
*eg:$('#input').lenTracer({bind2Id:'myTracer',max:150,msgWrap:'您还可以输入-个字符'});
*author:liujg1015@gmail.com
*/
(function ($) {
    var zw_validate = function (el, option) {
        this.el = $(el);
        this.bindEl = false;
        this.setting = {
            bind2Id: false,
            max: 100,
            msgWrap: '您还可以输入-个字符'
        };
        if (option) {
            $.extend(this.setting, option);
            this.init();
        }
    };
    zw_validate.prototype = {
        init: function () {
            var _this = this;
            this.bindEl = $('#' + this.setting.bind2Id);
            this.el.focus(function () { _this.start(); }).blur(function () { _this.dispose(); });
            this.el.css({ paddingBottom: 20 });
            this.initMsg();
        },
        initMsg: function () {
            var wrap = this.setting.msgWrap.split('-');
            this.bindEl.text(this.setting.max - this.count().total).before(wrap[0]).after(wrap[1]);
        },
        count: function () {
            var _val = this.el.val();
            var _len = _val.length;
            var _rowCount = 0;
            var _enterLen = 0;
            var _partten = /\n+/g;
            if (_len > 0 && _partten.test(_val)) {
                _enterLen += 3;
                while ((result = _partten.exec(_val)) != null) {
                    if ((result.index + 1 + _enterLen) > this.setting.max) {
                        break;
                    }
                    _enterLen += 3;
                }
                _rowCount = _val.match(_partten).length;
            }
            return { total: (_len + _rowCount * 3), enterLen: _enterLen };
        },
        start: function () {
            var _this = this;
            _this.timer = setInterval(function () {
                var _val = _this.el.val();
                var _rlt = _this.count();
                if (_rlt.total > _this.setting.max) {
                    if (_rlt.enterLen > 0) {
                        _this.el.val(_val.substr(0, _this.setting.max - _rlt.enterLen));
                    }
                    else {
                        _this.el.val(_val.substr(0, _this.setting.max));
                    }
                    _this.bindEl.text(_this.setting.max - _this.count().total);
                    return;
                }
                _this.bindEl.text(_this.setting.max - _rlt.total);
            }, 300);
        },
        dispose: function () {
            clearInterval(this.timer);
        },
        restore: function () {
            this.bindEl.text(this.setting.max - this.el.val().length);
        }
    };
    $.fn.extend({
        lenTracer: function (option) {
            return new zw_validate(this, option);
        }
    });
})(jQuery);

一、上面是计数器的脚本，可将脚本贴到js文件中，然后在html里面添加引用。

<html>
    <head>
        <title>demo</title>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    标题
           </td>
                <td>
                    <input type="text" id="title" />
                    <span id="titlelen"></span>
                </td>
            </tr>
            <tr>
                <td>
                    评论
           </td>
                <td>
                    <textarea cols="5" rows="5" id="comment"></textarea>
                    <span id="commentlen"></span>
                </td>
            </tr>
        </table>
    <script src="../scripts/jquery.js" type="text/javascript"></script>
    <script src="../scripts/lentracer.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                $('#title).lenTracer({ bind2Id: titlelen, max: 50});
                $('#comment).lenTracer({ bind2Id: commentlen, max: 200, msgWrap: '剩余-字' });
        });
    </script>
    </body>
</html>