jquery在计算器中自动填充输入字段

时间:2016-09-22 09:31:39

标签: javascript jquery html

我有一个百分比字段,用户可以输入一个数字并自动获取百分比值:

https://jsfiddle.net/km6Lznex/

(如果使用firefox,请考虑在jsfiddle中将'event'作为参数添加到函数中)

$('#table').on('keyup', '.update', function (event) {
    var key = event.keyCode || event.charCode;
    if( key == 8 || key == 46 ) return false;
    calculateTotals();
});

$('#percent').change(function () {
    calculateTotals();
});

function calculateTotals(){
    var dscnt_addition_percent = $('#percent');
    var dscnt = dscnt_addition_percent.val().trim().replace(/[^0-9$.,]/g, ''); 
    dscnt = dscnt == '' ? 0 : dscnt;
    dscnt_addition_percent.val(dscnt);      

    var subtotal = parseInt($('#sum').val());
    var grandTotal = $('#grandTotal').val();
    var m = dscnt_addition_percent.val() * subtotal/100;
    $('#euro').val(m);
    $('#grandTotal').val(m + subtotal);
}

<div id="table">
  € <input type="text"  id="euro"  placeholder="0,00 €" /><br>
  % <input type="text"  id="percent" value="0" placeholder="0,00 %" /><br>
  subtotal <input type="text" class="update" id="sum" disabled value="10000" /><br>
  total  <input type="text" class="form-control update" id="grandTotal"  placeholder="0,00" />

现在我想用文本字段来表示€。当我输入金额时,百分比字段和总字段应该更新

1 个答案:

答案 0 :(得分:0)

当您更改#percent时,它会计算#grandTotal#euro的新值,并将输入设为#sum#percent。现在您在更改时需要同样的内容{ {1}},将自己和#euro作为输入。因为你现在正在计算%,你需要稍微更改一下这个函数 即。

#sum更改后的#percent

euro = percent * subtotal/100;更改后的#euro

所以要么你可以使用一个单独的函数,要么使用与percent = euro * 100/subtotal;相同的函数,它准确地告诉哪个文本框是事件的起源

even.target

这里也没什么变化

function calculateTotals(event)
{
    var dscnt_addition_percent = $('#percent');
    ...
    ..
    .

    if(event.target.id=="percent")
    {
    //CALCULATE €
    }

    if(event.target.id=="euro")
    {
    //CALCULATE %
     var euro = $("#euro").val();
     var subtotal = parseInt($('#sum').val());

     var percent= euro * 100/subtotal;
     dscnt_addition_percent.val(percent);
     $('#grandTotal').val(euro + subtotal);
    }

}