js文本框字符数输入限制

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

 (function ($) {
     $.fn.limitTextarea = function (opts) {
         var defaults = {
             maxNumber: , //允许输入的最大字数
             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 >= ) {
                     $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().addEventListener("input", fn, false);
             } else {
                 _this.get().attachEvent("onpropertychange", fn);
             }
             if (window.VBArray && window.addEventListener) { //IE9
                 _this.get().addEventListener("onkeydown", function () {
                     var key = window.event.keyCode;
                     (key ==  || key == ) && fn(); //处理回退与删除
                 });
                 _this.get().addEventListener("oncut", fn); //处理粘贴
             }
         });
     }
     function getByteLen(val) {
         var len = ;
         for (var i = ; i < val.length; i++) {
             if (val[i].match(/[^\x00-\xff]/ig) != null) //全角
                 len += ;
             else
                 len += ;
         }
         return len;
     }
     function getByteVal(val, max) {
         var returnValue = '';
         var byteValLen = ;
         for (var i = ; i < val.length; i++) {
             if (val[i].match(/[^\x00-\xff]/ig) != null)
                 byteValLen += ;
             else
                 byteValLen += ;
             if (byteValLen > max)
                 break;
             returnValue += val[i];
         }
         return returnValue;
     }
 })(jQuery)

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

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

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

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

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

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

             }
         });

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

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