使用 jQuery/JS 键入时使用 1000 个分隔符和 2 个小数位格式化货币输入？

Posted 2023-04-14

【中文标题】使用 jQuery/JS 键入时使用 1000 个分隔符和 2 个小数位格式化货币输入？

【英文标题】：Format currency input with 1000 separator and 2 decimal places upon typing using jQuery/JS?

【发布时间】：2018-04-03 06:46:55

【问题描述】：

我有一个文本输入，我希望它在输入允许 2 个小数位和 1000 个分隔符的值时格式化。它应该只允许数字。 我已经完成了以下操作，但它不允许添加小数点。简单来说就是用于输入产品（货币）的价格。

INPUT = 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(?=(\d3)+(?!\d))/g, ",");
    );
);

【问题讨论】：

别忘了接受你认为正确的答案。我们期待您的到来。不要只是问就走开。

【参考方案1】：

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

.replace(/(?!\.)\D/g, "") 删除除. 之外的所有非数字字符 .replace(/(?<=\..*)\./g, "") 删除所有额外的 . 除了第一个 . .replace(/(?<=\.\d\d).*/g, "") 删除小数点后两位 .replace(/\B(?=(\d3)+(?!\d))/g, ",") 在适当的位置插入逗号

我已修改事件以将输入字段的所有更改解释为.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(?=(\d3)+(?!\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" />

【讨论】：

@TechyTee 什么不起作用？你尝试了什么输入失败了？

@TechyTee 用另一个变体更新了答案。检查一下。

还是不行。 sn-p 给出一个错误。我只输入了数字。没啥事儿。错误： "message": "SyntaxError: invalid regexp group", "filename": "stacksnippets.net/js", "lineno": 16, "colno": 60

它看起来不错，当我写信时我什么都没有，当我写数字时我有$XX,XXX,XXX，如果我添加一个.，我后面只有一个而且只有2个数字，那就是不是 OP 想要的？

@TechyTee jsfiddle.net/xpvt214o/31495 在小提琴中尝试相同的脚本

【参考方案2】：

您可以限制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)(?=(\d3)+(?!\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">

【讨论】：

它允许多于 2 位小数。当输入多个. 时，它会截断整个小数位，只返回整数

如何输入两个.？它对此有保护。而且我没想到小数点后两位，我会更新答案。

更新了我的答案。

输入第二个. 仍然会截断所有小数位。尝试56565.56.56

你在哪个浏览器上测试？

【参考方案3】：

$('#price').on('keyup click change paste input', function (event) 
    $(this).val(function (index, value) 
        if (value != "") 
            //return '$' + value.replace(/\D/g, "").replace(/\B(?=(\d3)+(?!\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(?=(\d3)+(?!\d))/g, ',');
            if (components.length === 2) 
                components[1] = components[1].replace(/\D/g, '').replace(/^\d3$/, '');
            

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

【讨论】：

在您的代码中，当我输入第二个小数位时，它会截断所有小数位。这是你想要的吗..？