跳转到内容


jQuery 限制输入文字数量插件(jquery.inputlimiter-2.0.js)

jQuery 插件

  • 您无法回复此主题
No replies to this topic

#1 冰力

    Administrator

  • 总版主
  • 1316 帖子数:

发表于 2012/02/10 13:29:00

项目需要完成的文本输入框字符数量限制器,自己使用感觉还不错,特推荐给大家。

1.源码
/*
* inputlimiter 2.0
* Date: 2012-03-07
* (c) 2012 zoujiaqing@gmail.com, http://www.itbbs.cn/
*
* This is licensed under the GNU LGPL, version 2.1 or later.
* For details, see: http://creativecommons.org/licenses/LGPL/2.1/
*/

$.fn.inputlimiter = function () {

    var _this = this;

    _this.mb_substr = function(str, startp, endp) {

        var i=0; c = 0; unicode=0; rstr = '';
        var len = str.length;
        var sblen = str.replace(/[^\x00-\xff]/g,"**").length;

        if (startp < 0) {
            startp = sblen + startp;
        }

        if (endp < 1) {
            endp = sblen + endp;
        }

        for(i = 0; i < len; i++) {
            if (c >= startp) {
                break;
            }
            var unicode = str.charCodeAt(i);
            if (unicode < 127) {
                c += 1;
            } else {
                c += 2;
            }
        }

        for(i = i; i < len; i++) {
            var unicode = str.charCodeAt(i);
            if (unicode < 127) {
                c += 1;
            } else {
                c += 2;
            }
            rstr += str.charAt(i);

            if (c >= endp) {
                break;
            }
        }

        return rstr;
    }

    $(this).each(function (i) {
        if ($(this).nextAll('div.textlimit').size() == 0) {
            $(this).after('<div class="textlimit">还可输入 n 字符</div>');
        }

        $(this).bind('propertychange focus keyup input paste', function () {
            var _max = $(this).attr('max');
            var _length = $(this).val().replace(/[^\x00-\xff]/g,"**").length;
            if (_length > _max) {
                $(this).val(_this.mb_substr($(this).val(), 0, _max));
            }
            _left = $(this).offset().left;
            _top = $(this).offset().top;
            _width = $(this).width();
            _height = $(this).height();

            $(this).nextAll('div.textlimit').html('还可输入 ' + (_max-_length) + ' 字符');
            $(this).nextAll('div.textlimit').css({
                'left': _left + _width + 15,
                'top': _top + _height - 12
            });
        });

        $(this).focus(function () {
            $(this).nextAll('div.textlimit').fadeIn('slow');
        });

        $(this).blur(function () {
            $(this).nextAll('div.textlimit').fadeOut('slow');
        });
    });
};


2.使用(引入inputlimiter文件,直接在要限制的input控件上填写max=“要限制的字符数”即可)

<!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 runat="server">
    <title>字符限制器</title>
    <style type="text/css">
	    .textlimit {
		    position:absolute;
		    font-size:9pt;
		    color:#4586b5;
		    font-size:16px;
		    font-weight:bold;
		    font-family:Arial;
		    display:none;
	    }
    </style>
    <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="jquery.inputlimiter-2.0.js" type="text/javascript"></script>
    <script>
    $(function () {
        $('textarea[max],input[max]').inputlimiter();
    });
    </script>
</head>
<body>
    <p>单行限制:<input type="text" size="40" max="10" /></p>
    <p>多行限制:<textarea rows="4" cols="40" max="140"></textarea></p>
    <br />
    <a href="http://www.itbbs.cn/">到ITBBS提建议</a> | <a href="http://weibo.com/zoujiaqing/">@邹佳庆</a>
</body>
</html>

附加文件