按键事件中的数字验证以及小数

时间:2016-05-16 14:57:09

标签: javascript

除了案例,我正在对数字进行验证。我正在按键事件中进行验证。

这是我进行验证的过程..

输出长度=积分+小数

示例:积分= 5,小数= 3

如果用户输入五位数,则不允许输入第6位数字。 (即12345)。 但如果他输入'。'之后我允许3位小数(即12345.678)。这很完美。

我遇到了以下问题。

如果用户输入1.234,那么他导航到'之前。'使用箭头或鼠标单击放置,然后用户无法输入另一个数字。因为我正在检查积分部分或小数部分是否匹配长度,所以我返回false。

任何人都可以帮我解决这个问题。我可以用密钥事件做,但我试图通过按键事件来实现这一点。有没有办法获得用户输入数字的位置,如果是,那么我可以得到一个解决方案。

var integral = 5, decimals = 3; 
//below code in the key press event
if ([8, 9, 13, 37, 39,46].indexOf(e.keyCode) != -1) {
    return true;
} else if (e.keyCode == 190 && !e.shiftKey && decimals) {
    _value = $(this).val();
    if (_value.indexOf('.') != -1) {
        return false;
    }
    return true;
} else if (48 >= e.keyCode || e.keyCode <= 57) {
    _value = $(this).val();
    if (decimals) {
        _value = _value.split('.');
        if (_value[0].length == integral || (_value[1] || '').length == decimals) {
            return false;
        }
        return true;
    } else {
        if (_value.length == integral) {
            return false;
        }
        return true;
    }
}
return false;

2 个答案:

答案 0 :(得分:0)

如果您已经知道如何使用keyup事件,那么您应该能够获取该代码并将其插入到keypress处理程序中,并将其实现为输入中的值,如果您通过该值传递。 例如(我假设您的验证在示例中起作用):

$("#myinput").keypress(function (e) {  
    //first figure out what the value would be if the keypress were passed through
    var key=(e.which) ? e.which : e.keyCode;  
    var inputvalue=String.fromCharCode((96 <= key && key <= 105)? key-48 : key)
    var caretPos = document.getElementById("myinput").selectionStart;
    var currentvalue=$("#myinput").val();
    var outputstring=currentvalue.substring(0, caretPos) + inputvalue + currentvalue.substring(caretPos);

    //allow decimals through
    if (outputstring===".") {    
          e.preventDefault();           
          $("#myinput").val("0.");
          return false;
    }
    //cancel keypress if they string already has a decimal
    if(key===46) return (outputstring.split(".").length - 1)>2;          

    //now perform the truncation and validation
    e.preventDefault();   
    var outputvalue=parseFloat(outputstring);
    var decpart=Math.trunc((outputvalue- parseInt(outputvalue)) * 1000)/1000;
    var intpart=Math.floor(outputvalue);
    //perform your test on the output value here - only need to test the integer part, since the decimal part is truncated
    var outputtest=String(intpart).length<=5; 
    if (outputtest){         
          //insert the value if it looks okay      
          $("#myinput").val(intpart+decpart);              
    }
    return false;
});

答案 1 :(得分:0)

我使用selectionEnd获取用户输入数字的位置。用它我做了。

var evt = e.target || e.srcElement;
        _value = $(evt).val();
        if ([8, 9, 13, 37, 39, 46].indexOf(e.keyCode) != -1) {
            return true;
        }
        else if (e.keyCode == 190 && !e.shiftKey && decimals) {
            if (_value.indexOf('.') != -1) {
                return false;
            }
            return true;
        }
        else if (48 >= e.keyCode || e.keyCode <= 57) {
            if (decimals) {
                var isHavingDot = false;
                var dotPosition = '';
                if (_value.indexOf('.') != -1) {
                    isHavingDot = true;
                    dotPosition = _value.indexOf('.')
                }
                var length = _value.length;
                if (isHavingDot) {
                    _value = _value.split('.');
                    if (evt.selectionEnd <= dotPosition) {
                        if (_value[0].length >= integral) {
                            return false;
                        }
                    }
                    else if ((_value[1] || '').length >= decimals) {
                        return false;
                    }
                }
                else {
                    if (_value.length >= integral) {
                        return false;
                    }
                }
                return true;
            }
            else {
                if (_value.length == integral) {
                    return false;
                }
                return true;
            }
        }
        return false;