Question

我目前有一个简单的小键盘，可以在span标记.bill-amount__integer中插入一个美元金额。此范围内的默认文本显示为0.00。

<div class="bill-amount__value">
    <span>$</span><span class="bill-amount__integer">0.00</span>
</div>

现在，每个按钮的数字数字以类似堆栈的方式附加到范围 LIFO ，可在下面条件的第一个和最后一个块中看到。

$(".numpad__button").on("click", function() {
    var that = this,
        $that = $(that);

    if ($that.hasClass("numpad__button--backspace")) {
        $(".bill-amount__integer").text(function(index, value) {
            return value.slice(0, -1);
        });
    } else if ($that.hasClass("numpad__button--return")) {
        if ($(".bill-amount__integer").text().length === 0) {
            $(".bill-amount__value").hide(0, function() {
                $(this).prev().show()
            });
        }
        $(".numpad").removeClass("numpad--raised");
    } else {
        $(".bill-amount__integer").text(function(index, value) {
            return value += that.innerText;
        });
    }
});

我想要做的是替换0并从右边开始插入所选的整数并向左移动。例如：

0.05  // If I insert the number 5
0.50  // If I insert numbers 5 and 0
5.50  // If I insert numbers 5,0,0 
50.50 // If I insert numbers 5,0,0,0

相同的方法可用于删除数字但重新插入0（相反）。

50.50 // Starts out at 50.50 and is reduced in the sequence below
5.05
0.50
0.05

除了插入/删除整数之外，我还想为每三位数添加一个逗号。我设法使用下面的正则表达式执行此操作，但并不完全如何将其与我想要实现的内容集成：

$(".numpad__button").on("click", function() {
  ...
  $(".bill-amount__integer").text(function(i, v) {
    return v.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  });
});

JSFiddle

Answer 1

有些东西我没有真正得到，为什么这么多的痛苦切片和构造字符串，当你所要做的就是将输入的数字除以100？

这是你想要的吗？（不确定）

$span = $("span");
$("input").on('keyup change', function(){
    $span.text(($(this).val()/100).toFixed(2) || '0.00')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number">
<p>Result : <span>0.00<span></p>

关于数字格式，请查看jQuery-numberFormatter。

修改

好的，我重写了你的代码，我认为它现在正在运行：http://jsfiddle.net/3o94pf5h/16/

Answer 2

要操纵该值，只需乘以10或100;或除以10或100.您只需要用零填充数字并添加逗号。它听起来像是“收银机”类型的按钮，有一个“0”和一个“00”，自动发出[5] [00] = $ 5.00，和[5] [0] [00] = $ 50.00等等。???

使用javascript的toFixed方法。例如：

var number = 425.1;    
var formatted = number.toFixed(2); // formatted = 425.10

有一些预构建的jQuery代码： jquery.formatNumber

//produces 29,323,894.23 (e.g. US standard)
$('.number').formatNumber({
  cents: '.',
  decimal: ','
});

更多预构建的jQUery代码： jquerypriceformat.com

$('#htmlfield').priceFormat();
Result:  US$ 1,234.56

$('#example2').priceFormat({
    prefix: 'R$ ',
    centsSeparator: ',',
    thousandsSeparator: '.'
});
Result:  R$ 1.234,56

添加逗号，借鉴： Number formatting, add commas

function addCommas(nStr) {
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}

在Javascript中添加逗号时按索引替换文本

2 个答案: