雁过请留痕...
代码改变世界

input 数字输入控制(含小数)

2016-03-30 11:02  xiashengwang  阅读(586)  评论(0编辑  收藏  举报

1,可以在keypress里验证输入的字符的合法性。

    // 数字控件的入力控制
    $("input.comma,input.comma1,input.comma2").keypress(function (e) {
        var key = String.fromCharCode(e.charCode);
        // 数字和点以外不能输入
        if (!/[0-9.-]/.test(key)) {
            return false;
        }

        var digit = 0;
        if ($(this).hasClass("comma")) {
            digit = 0;
        } else if ($(this).hasClass("comma1")) {
            digit = 1;
        } else if ($(this).hasClass("comma2")) {
            digit = 2;
        }
        var previewText = this.value.substring(0, this.selectionStart) + key + this.value.substring(this.selectionEnd);
        if (previewText != '-' && previewText != '.' && !$.isNumeric(previewText)) {
            return false;
        }

        if (digit == 0) {
            // 整数的时候、不能输入点
            if (previewText.indexOf('.') > -1) {
                return false;
            }
        } else {
            // 小数的时候、超过小数位数不能输入
            var parts = previewText.split('.');
            if (parts.length > 1) {
                if (parts[1].length > digit) {
                    return false;
                }
            }
        }
    });

2,在光标失去blur事件里,值已经输入完了,可以做值范围检查。或者由于拷贝过来的文字,keypress是验证不到的,可以再做一次数值检查,

不是数字的话,直接清空。

    // 光标失去的时候,检查输入类型,值范围
    $("input.comma,input.comma1,input.comma2").blur(function (e) {
        var val = removeComma(this.value);
        if (!$.isNumeric(val)) {
            // 数字以外,直接清空
            $(this).val('');
            return false;
        }
        // 值范围检查
        if ($(this).attr("numberRange")) {
            var range = $(this).attr("numberRange").split(',');
            var min = parseFloat(range[0]);
            var max = parseFloat(range[1]);
            var curValue = parseFloat(val);

            // 最大値
            if (curValue > max) {
                $(this).val(format_number(max));
                $(this).trigger("change");
            }
            // 最小値
            if (val < min) {
                $(this).val(format_number(min));
                $(this).trigger("change");
            }
        }
    });