js文本框字符数输入限制

　　我们常常在前台页面做一些文本输入长度的验证，为什么呢？因为数据库字段设置了大小，如果不限制输入长度，那么写入库时就会引发字符串截断异常。今天就给大家分享一个jquery插件来解决这一问题。

(function ($) {
    $.fn.limitTextarea = function (opts) {
        var defaults = {
            maxNumber: 500, //允许输入的最大字数
            position: 'top', //提示文字的位置，top：文本框上方，bottom：文本框下方
            onOk: function () { }, //输入后，字数未超出时调用的函数
            onOver: function () { } //输入后，字数超出时调用的函数
        }
        var option = $.extend(defaults, opts);
        this.each(function () {
            var _this = $(this);
            var info = '<div id="info' + option.maxNumber + '">还可以输入<b>' + (option.maxNumber - getByteLen(_this.val())) + '</b>字符</div>';
            var fn = function () {
                var $info = $('#info' + option.maxNumber + '');
                var extraNumber = option.maxNumber - getByteLen(_this.val());

                if (extraNumber >= 0) {
                    $info.html('还可以输入<b>' + extraNumber + '</b>个字符');
                    option.onOk();
                } else {
                    $info.html('还可以输入<b>0</b>个字符');
                    option.onOver();
                }
            };
            switch (option.position) {
                case 'top':
                    _this.before(info);
                    break;
                case 'bottom':
                default:
                    _this.after(info);
            }
            //绑定输入事件监听器
            if (window.addEventListener) { //先执行W3C
                _this.get(0).addEventListener("input", fn, false);
            } else {
                _this.get(0).attachEvent("onpropertychange", fn);
            }
            if (window.VBArray && window.addEventListener) { //IE9
                _this.get(0).addEventListener("onkeydown", function () {
                    var key = window.event.keyCode;
                    (key == 8 || key == 46) && fn(); //处理回退与删除
                });
                _this.get(0).addEventListener("oncut", fn); //处理粘贴
            }
        });
    }
    function getByteLen(val) {
        var len = 0;
        for (var i = 0; i < val.length; i++) {
            if (val[i].match(/[^x00-xff]/ig) != null) //全角 
                len += 2;
            else
                len += 1;
        }
        return len;
    }
    function getByteVal(val, max) {
        var returnValue = '';
        var byteValLen = 0;
        for (var i = 0; i < val.length; i++) {
            if (val[i].match(/[^x00-xff]/ig) != null)
                byteValLen += 2;
            else
                byteValLen += 1;
            if (byteValLen > max)
                break;
            returnValue += val[i];
        }
        return returnValue;
    }
})(jQuery)

48行以下，我的同事添加了两个函数，其实这么写有点奇怪，我们完全可以采用函数表达式的写法。比如：

  this.getByteLen= function(val) {
        var len = 0;
        for (var i = 0; i < val.length; i++) {
            if (val[i].match(/[^x00-xff]/ig) != null) //全角 
                len += 2;
            else
                len += 1;
        }
        return len;
    }

不过需要注意的一点是，此定义形同变量定义，要写到被调用代码之前。不过这就牵扯到了“闭包”等一系列概念，我们以后再讨论。

再看看这个插件如何使用：

 $('#Remarks').limitTextarea({
            maxNumber: 800, //最大字数
            position: 'bottom', //提示文字的位置，top：文本框上方，bottom：文本框下方
            onOk: function () {
                $('#Remarks').css('background-color', 'white');
            }, //输入后，字数未超出时调用的函数
            onOver: function () {
                var value = $('#Remarks').val();

                $('#Remarks').val(getByteVal(value, 800));

            }
        });

经实践，用起来还不错，特此推荐。

如上图，13个汉字，26个字节，数据库名称限制是28个字节。