Input数字限制为整数4位和小数后2位的方法[jquery 插件]
2016/03/12    标签: input数字限制    jQuery插件   

现在做项目经常会遇到限制input 输入框只允许输入特定内容的情况。
从网上找了不少解决方案,虽然都能实现只能输入数字的情况,但大都没有任何提示且输入时不够流畅,体验度不够友好。
又由于本人比较懒,所以写了个jQuery插件,方便将来使用。

实现内容:
input输入可自行设置整数位和小数位长度;
在限定范围内的输入的流畅性;
回调函数返回超出长度时的错误信息和真实数值;
只输入小数点时显示0.整数位自动补0;
小数点后不允许再次出现小数点。

知识点:
a.jQuery 插件的写法;
b.jQuery $.grep正则表达式的使用;
c.<input style=”ime-mode:disabled”/>。

使用方法:
1.引入jQuery脚本和本插件;
2.$(“input[type=text]”).checkNum({
integerLength:4,//整数位长度
decimalLength:2,//小数位长度
Keyup:function(objRt){
/***
objRt.outIntegerLength整数位是否超出规定长度 bool
objRt.outDecimalLength小数位是否超出规定长度 bool
objRt.entryValueReal输入框内真正的数值 int
***/
}
});

DEMO示例: input数字限制的demo

插件内容:

/***
    date:2015/06/26
    by:zhuifengh2o
    site:www.lpsjj.cn
***/
;(function ($) {
    $.fn.checkNum = function (obj) {
        var option = $.extend({
            integerLength: 4, //整数位长度
            decimalLength: 2, //小数位长度
            keyup: function (objRt) {
                /***
                objRt.outIntegerLength整数位是否超出规定长度 bool
                objRt.outDecimalLength小数位是否超出规定长度 bool
                objRt.forbidCode      是否有非法字符        bool
                objRt.entryValueReal  输入框内真正的数值
                ***/
            }
        }, obj);
        var objRtN = {
            outIntegerLength: false,
            outDecimalLength: false,
            forbidCode: false,
            entryValueReal: ''
        };
        $(this).css("ime-mode",'disabled');
        $(this).on('keyup blur',function (e) {
            var entryValue = $.trim($(this).val());
            var rewrite = false;
            //过滤非法字符
            var enableStr = '.0123456789';
            var entryValueEvery = entryValue.split('');
            var entryValueM = $.grep(entryValueEvery, function (m, n) {
                var regM = new RegExp(m);
                return regM.test(enableStr);
            }).join('');
            if (entryValueM.length != entryValue.length) {
                rewrite = true;
                objRtN.forbidCode = true;
                entryValue = entryValueM;
            } else {
                rewrite = false;
                objRtN.forbidCode = false;
            }
            var entryValueN = entryValue;
            if (~entryValue.indexOf('.')) {//过滤重复的'.'及'.'开头的情况
                var valueArr = entryValue.split('.');
                if (valueArr[0] == '') {
                    valueArr.unshift(0);
                }
                ;
                if (valueArr.length > 2) {
                    rewrite = true;
                    entryValueN = valueArr[0] + '.';
                    for (var i = 1; i < valueArr.length; i++) {
                        entryValueN += valueArr[i];
                    }
                }
                // valueArr = entryValueN.split('.');
            }
            ;
            valueArr = entryValueN.split('.');
            //console.log(valueArr[0].length > option.integerLength);
            if (valueArr[0].length > option.integerLength) {
                objRtN.outIntegerLength = true;
                valueArr[0] = valueArr[0].substring(0, option.integerLength);
                if (typeof (valueArr[1]) == "undefined") {
                    entryValueN = valueArr[0];
                    $(this).val(entryValueN);
                } else if (valueArr[1] == '') {
                    entryValueN = valueArr[0] + '.';
                    $(this).val(entryValueN);
                } else {
                    valueArr[1] = valueArr[1].substring(0, option.decimalLength);
                    entryValueN = valueArr[0] + '.' + valueArr[1];
                    $(this).val(entryValueN);
                }

            } else if (typeof (valueArr[1]) != "undefined" && (valueArr[1].length > option.decimalLength)) {
                objRtN.outDecimalLength = true;
                valueArr[1] = valueArr[1].substring(0, option.decimalLength);
                entryValueN = valueArr[0] + '.' + valueArr[1];
                $(this).val(entryValueN);
            } else if (rewrite) {
                $(this).val(entryValueN);
                objRtN.outIntegerLength = false;
                objRtN.outDecimalLength = false;
            } else {
                objRtN.outIntegerLength = false;
                objRtN.outDecimalLength = false;
            }
            objRtN.entryValueReal = $(this).val();
            if (objRtN.entryValueReal.lastIndexOf('.') == (objRtN.entryValueReal.length-1)) {
                objRtN.entryValueReal = objRtN.entryValueReal.substring(0,objRtN.entryValueReal.length-1);
            }
            option.keyup(objRtN);
        });
    };
})(jQuery);