带小数格式的HTML输入999,99

时间:2017-03-30 15:43:38

标签: html input format decimal

当我引入3个整数时,我不能引入也不能引用小数点分隔符,直到我删除一些数字。

它一定是在按键中,我用正则表达式和我所知道的所有javascript和JQuery测试。

非常感谢。

$('#calculator-input').keypress(function (event) {

    var $this = $(this);
    if ((event.which != 44 || $this.val().indexOf(',') != -1) &&
       ((event.which < 48 || event.which > 57) &&
       (event.which != 0 && event.which != 8))) {
           event.preventDefault();
    }

    var text = $(this).val();
    if ((event.which == 44) && (text.indexOf(',') == -1)) {
        setTimeout(function() {
            if ($this.val().substring($this.val().indexOf(',')).length > 3) {
                $this.val($this.val().substring(0, $this.val().indexOf(',') + 3));
            }
        }, 1);
    }

    if ((text.indexOf(',') != -1) &&
        (text.substring(text.indexOf(',')).length > 2) &&
        (event.which != 0 && event.which != 8) &&
        ($(this)[0].selectionStart >= text.length - 2)) {
            event.preventDefault();
    }

    var calculatorInput = $('#calculator-input').val().split(",");
    var integers = parseInt(calculatorInput[0], 10);
    var decimals = parseInt(calculatorInput[1], 10);

    if(calculatorInput[0].length >= 3) {
        return false;
    }

});

1 个答案:

答案 0 :(得分:0)

据我了解您的问题,您希望格式化输入字段中的数字。但是这个解决方案呢?

document.getElementById("decimal-input").onkeyup = function() {
    var digits = this.value.match(/\d/g);
    if(digits) {
        digits = +digits.join("");
        this.value = digits.toLocaleString();
    }
}
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
    </head>
    <body>
        <input type="text" id="decimal-input">
    </body>
    </html>

我建议您使用keyup事件,但也可以将其替换为keypress事件。我没有添加验证但是试一试,看看它是否适合你。