代码之家 › 专栏 › 技术社区 › Rzj Hayabusa

如何将jquery中的运算符输出设置为数千个分隔符和2个小数点?

jquery

Rzj Hayabusa · 技术社区 · 6 年前

我使用这些HTML输入计算两个输入1&2并将结果显示到输入3中:

<input type="text" class="inputdecimals" id="txt_balance_dec" name="txt_balance_dec" value="0.00">
<input type="text" class="inputdecimals" id="txt_nett_dec"    name="txt_nett_dec"    value="0.00"readonly>


<input type="text" class="inputdecimals" id="txt_balance_nov" name="txt_balance_nov" value="0.00">

以下是输入小数的jquery:

<script>
    $(document).ready(function(e){
        $('input.inputdecimals').keyup(function(event) {
            if(event.which >= 37 && event.which <= 40) return;
            $(this).val(function(index, value) {
              return value
              .replace(/[^\d.]/g, "")
              .replace(/^(\d*\.)(.*)\.(.*)$/, '$1$2$3')
              .replace(/\.(\d{2})\d+/, '.$1')
              .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
              ;
            });
          });
    });
</script>

我的目标是减去这个值( TXTA BALYDEC DEC - 巴尔斯诺夫 )并将总数显示为 TXTYNETTXDEC .

由于输入的HTML输入已经将值更改为千位分隔符和2个小数点,所以输出并没有按我想要的方式显示。

例如,10000.00-6000.00等于6,而不是6000.00(下图)

我不知道如何先替换千位分隔符,然后计算,同时保持2位小数。当显示输出时,我需要放回千位分隔符和2位小数。

我的jquery计算如下。对不起,我对jquery不是很在行。

$("#txt_balance_dec").keyup(function() {
        var bal_dec = parseFloat($(this).val(), 2);
        var bal_nov = parseFloat($('#txt_balance_nov').val(), 2);
        var result = bal_dec - bal_nov;
        $('#txt_nett_dec').val(result);
    });

感谢有人能帮我解决这个问题。谢谢。

1 回复 | 直到 6 年前

Tyler Roper 6 年前

必须从字符串中去掉所有逗号之前您试图分析它,因为用逗号分析数字只会分析高达第一个逗号。

//For example           Result
parseFloat("5,4,3")     // 5
parseFloat("15,000")    // 15
parseFloat("123,456")   // 123

这可以通过简单的替换来完成: .replace(/,/g,'');

我也做了一些修改来整理:

生成一个同时执行这两个操作的函数 replace 和 parseFloat 打电话 parseCurrency ,使其易于重复使用
将格式放入名为 formatCurrency ,使其易于重复使用
制造 dec_balance 和 nov_balance 输入可以共享一个事件,因为对其中一个的更改将强制 net 重新计算

const formatCurrency = (str) => (""+str).replace(/[^\d.]/g, "").replace(/^(\d*\.)(.*)\.(.*)$/, '$1$2$3').replace(/\.(\d{2})\d+/, '.$1').replace(/\B(?=(\d{3})+(?!\d))/g, ",");
const parseCurrency = (str) => str.replace(/,/g,'');

$('input.inputdecimals').keyup(function(event) {
  if (event.which >= 37 && event.which <= 40) return;
  $(this).val((i,v) => formatCurrency(v));
});

$("#txt_balance_dec, #txt_balance_nov").keyup(function() {
  var bal_dec = parseCurrency( $("#txt_balance_dec").val() );
  var bal_nov = parseCurrency( $("#txt_balance_nov").val() );
  var result = bal_dec - bal_nov;
  $('#txt_nett_dec').val(formatCurrency(result));
});

input { display: block; margin: 10px 0;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Dec <input type="text" class="inputdecimals" id="txt_balance_dec" name="txt_balance_dec" value="0.00">
Nov <input type="text" class="inputdecimals" id="txt_balance_nov" name="txt_balance_nov" value="0.00">
Net <input type="text" class="inputdecimals" id="txt_nett_dec" name="txt_nett_dec" value="0.00" readonly>

( 同样值得注意的是,您的格式化函数似乎被剥离了 - 因此 网 将是绝对值。 )