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個字節。