繁体   English   中英

使用jQuery / JS键入时,使用1000个分隔符和2个小数位设置货币输入的格式?

[英]Format currency input with 1000 separator and 2 decimal places upon typing using jQuery/JS?

我有一个文本输入,我希望在输入允许小数点后两位和1000个分隔符的值时进行格式化。 它应该只允许数字。 我已完成以下操作,但不允许添加小数点。 简而言之,它是用于输入产品(货币)的价格。

输入= 1234560ABC.5665(应只允许数字)

预期= 1,234,560.56(应将小数位限制为2)

我已经完成了以下工作,但不知道如何添加后跟“。”的十进制值。 固定“,” 1000个分隔符。

<input type="text" id="price" name="price" />

$('#price').keyup(function (event) {
    $(this).val(function (index, value) {
        return '$' + value.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    });
});

您可以限制keydown事件中的键而不是keyup并允许特定键生效,然后在keyup事件中格式化输入:

 $("#testinput").on("keydown", function(e) { var keycode = (event.which) ? event.which : event.keyCode; if (e.shiftKey == true || e.ctrlKey == true) return false; if ([8, 110, 39, 37, 46].indexOf(keycode) >= 0 || // allow tab, dot, left and right arrows, delete keys (keycode == 190 && this.value.indexOf('.') === -1) || // allow dot if not exists in the value (keycode == 110 && this.value.indexOf('.') === -1) || // allow dot if not exists in the value (keycode >= 48 && keycode <= 57) || // allow numbers (keycode >= 96 && keycode <= 105)) { // allow numpad numbers // check for the decimals after dot and prevent any digits var parts = this.value.split('.'); if (parts.length > 1 && // has decimals parts[1].length >= 2 && // should limit this ( (keycode >= 48 && keycode <= 57) || (keycode >= 96 && keycode <= 105) ) // requested key is a digit ) { return false; } else { if (keycode == 110) { this.value += "."; return false; } return true; } } else { return false; } }).on("keyup", function() { var parts = this.value.split('.'); parts[0] = parts[0].replace(/,/g, '').replace(/^0+/g, ''); if (parts[0] == "") parts[0] = "0"; var calculated = parts[0].replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, "$1,"); if (parts.length >= 2) calculated += "." + parts[1].substring(0, 2); this.value = calculated; if (this.value == "NaN" || this.value == "") this.value = 0; }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="testinput"> 

我的解决方案使用连续的.replace

  1. .replace(/(?!\\.)\\D/g, "")删除除.以外的所有非数字字符.
  2. .replace(/(?<=\\..*)\\./g, "")删除所有多余的. 除了第一个.
  3. .replace(/(?<=\\.\\d\\d).*/g, "")删除小数点后2位的所有内容
  4. .replace(/\\B(?=(\\d{3})+(?!\\d))/g, ",")在适当的位置插入逗号

我已经修改了该事件,以.on('change click keyup input paste'输入字段的所有更改都解释为.on('change click keyup input paste'

片段:

 $('#price').on('change click keyup input paste',(function (event) { $(this).val(function (index, value) { return '$' + value.replace(/(?!\\.)\\D/g, "").replace(/(?<=\\..*)\\./g, "").replace(/(?<=\\.\\d\\d).*/g, "").replace(/\\B(?=(\\d{3})+(?!\\d))/g, ","); }); })); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <input type="text" id="price" name="price" /> 

$('#price').on('keyup click change paste input', function (event) {
    $(this).val(function (index, value) {
        if (value != "") {
            //return '$' + value.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            var decimalCount;
            value.match(/\./g) === null ? decimalCount = 0 : decimalCount = value.match(/\./g);

            if (decimalCount.length > 1) {
                value = value.slice(0, -1);
            }

            var components = value.toString().split(".");
            if (components.length === 1)
                components[0] = value;
            components[0] = components[0].replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ',');
            if (components.length === 2) {
                components[1] = components[1].replace(/\D/g, '').replace(/^\d{3}$/, '');
            }

            if (components.join('.') != '')
                return '$' + components.join('.');
            else
                return '';
        }
    });
});

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM