如果用户只输入一个输入文本,如何将其数字扩展为两个?

时间:2015-07-17 23:04:06

标签: jquery tofixed

我想在“美元格式”的文本输入中显示值; IOW,而不是“10.5”,我希望它是“10.50”

我能够在总计框中这样做(最后一行代码):

$(document).on("blur", '.amountbox', function (e) {
    var amount1 = $('[id$=boxAmount1]').val() != '' ? parseFloat($('[id$=boxAmount1]').val()) : 0;
    var amount2 = $('[id$=boxAmount2]').val() != '' ? parseFloat($('[id$=boxAmount2]').val()) : 0;
    var amount3 = $('[id$=boxAmount3]').val() != '' ? parseFloat($('[id$=boxAmount3]').val()) : 0;
    var amount4 = $('[id$=boxAmount4]').val() != '' ? parseFloat($('[id$=boxAmount4]').val()) : 0;
    var amount5 = $('[id$=boxAmount5]').val() != '' ? parseFloat($('[id$=boxAmount5]').val()) : 0;
    var grandtotal = amount1 + amount2 + amount3 + amount4 + amount5;
    $('[id$=boxGrandTotal]').val(parseFloat(grandtotal).toFixed(2));
});

那个工作,我想也许我可以通过这样做(在他们的val()s中添加“.toFixed(2)”)来使各个“数量”框工作:

var amount1 = $('[id$=boxAmount1]').val() != '' ? parseFloat($('[id$=boxAmount1]').val().toFixed(2)) : 0;
var amount2 = $('[id$=boxAmount2]').val() != '' ? parseFloat($('[id$=boxAmount2]').val().toFixed(2)) : 0;
. . .

没有;事实上,它打破了现有的功能。

所以我接着“稍稍拨了一下”并尝试了第一个“金额”框,如下所示:

$('[id$=boxAmount1]').val() == parseFloat($('[id$=boxAmount1]').val().toFixed(2));

...但也失败了(输入“10.5”并退出/模糊并没有像我希望的那样将“10.5”转换为“10.50”。

如何使输入始终展开或收缩以显示两位数? IOW:

"10" should become "10.00"
"10.5" should become "10.50"
"10.567" should become "10.57"

2 个答案:

答案 0 :(得分:2)

而不是:

$('[id$=boxAmount1]').val() == parseFloat($('[id$=boxAmount1]').val().toFixed(2));

......这样做:

$('[id$=boxAmount1]').val(parseFloat($('[id$=boxAmount1]').val()).toFixed(2));

请注意,toFixed()方法仅适用于数字,因此您需要将其应用于parseFloat()的数字结果,而不是val()的字符串结果。

<小时/> 您的整个代码可以简化为以下内容:

$(document).on('blur', '.amountbox', function() {
  var grandtotal = 0;
  $('.amountbox').each(function() {
    var v= +$(this).val();
    if(v>'') {
      $(this).val(v.toFixed(2));
      grandtotal+= v;
    }
  });
  $('#boxGrandTotal').val(grandtotal.toFixed(2));
});

jQuery each 方法可以省去单独查看每个输入的麻烦。

在字符串前加上加号(+)会将其强制转换为数字,因此不需要parseFloat

Fiddle

答案 1 :(得分:0)

为了能够将它应用于所有文本输入(当它们为空时不会对其他文本输入产生负面影响),我必须将代码扩展到5个处理程序(除了原始输入之外):

/* boxAmount1...boxAmount5 - when any of them change, update boxGrandTotal */
$(document).on("blur", '.amountbox', function (e) {
    var amount1 = $('[id$=boxAmount1]').val() != '' ? parseFloat($('[id$=boxAmount1]').val()) : 0;
    var amount2 = $('[id$=boxAmount2]').val() != '' ? parseFloat($('[id$=boxAmount2]').val()) : 0;
    var amount3 = $('[id$=boxAmount3]').val() != '' ? parseFloat($('[id$=boxAmount3]').val()) : 0;
    var amount4 = $('[id$=boxAmount4]').val() != '' ? parseFloat($('[id$=boxAmount4]').val()) : 0;
    var amount5 = $('[id$=boxAmount5]').val() != '' ? parseFloat($('[id$=boxAmount5]').val()) : 0;
    var grandtotal = amount1 + amount2 + amount3 + amount4 + amount5;
    $('[id$=boxGrandTotal]').val(parseFloat(grandtotal).toFixed(2));
});

$(document).on("blur", '[id$=boxAmount1]', function (e) {
    $('[id$=boxAmount1]').val(parseFloat($('[id$=boxAmount1]').val()).toFixed(2));
});

$(document).on("blur", '[id$=boxAmount2]', function (e) {
    $('[id$=boxAmount2]').val(parseFloat($('[id$=boxAmount2]').val()).toFixed(2));
});

$(document).on("blur", '[id$=boxAmount3]', function (e) {
    $('[id$=boxAmount3]').val(parseFloat($('[id$=boxAmount3]').val()).toFixed(2));
});

$(document).on("blur", '[id$=boxAmount4]', function (e) {
    $('[id$=boxAmount4]').val(parseFloat($('[id$=boxAmount4]').val()).toFixed(2));
});

$(document).on("blur", '[id$=boxAmount5]', function (e) {
    $('[id$=boxAmount5]').val(parseFloat($('[id$=boxAmount5]').val()).toFixed(2));
});

Bonzo的插件时间?