javascript - Html 表单/jQuery : Changing input with tab reduces numeric value

Question

在我用 Html 和 jQuery 构建的表单上发生了一件奇怪的事情。基本上，我创建了一个愚蠢的函数，该函数从插入第一个输入的金额中扣除一定百分比(我的平台费用)，并将重新计算的金额放入第二个输入中。当然是相反的情况。

它是这样的:

• 输入 1:您提供什么
• 输入 2:您收到的内容(扣除我的平台费用)

正如您通过图像看到的(或多或少)，当我插入第一个输入1000时，如果我的百分比，第二个输入将填充930是7%。很直。

当我从第一个输入按 Tab 键到第二个输入时，会出现此问题。第二个保持其值(value)，但第一个进一步减损未定义的金额，我无法识别或阻止。我不知道为什么，我可能错过了一些非常愚蠢的东西，但我看不到它。

这是我的html:

<div class="row top-15 form-group">
    <div class="col-sm-6">
        <h4>
            <?php _e('Your bid','dev'); ?>
        </h4>
        <p>
            <?php _e("Insert project's budget",'dev'); echo $budget;?>
        </p>
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon3"><?php echo $currency ?></span>
            <input type="number" name="mybid" id="bid" class="form-control" value="<?php echo $bid; ?>" placeholder="<?php _e(" How much you offer ", "dev ") ?>" data-alert="<?php _e('Please type in a bid value.','dev'); ?>" />
        </div>
    </div>
    <div class="col-sm-6">
        <h4>
            <?php _e("You will receive",'dev'); ?>
        </h4>
        <p>
            <?php printf(__("%s of fees", 'dev'), '-' . $Dev_fee_after_paid . '%') ?>
            <span id="fees" data-fees="<?php echo $Dev_fee_after_paid ?>"></span>
        </p>
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon3"><?php echo $currency ?></span>
            <input type="number" name="total" id="total" class="form-control" value="" size="10" placeholder="<?php _e(" What you get ", "Dev ") ?>" />
        </div>
    </div>
</div>

我的 jQuery

var currency = $('#make-application').attr('data-currency');
var setFees = $('#fees').attr('data-fees');
var bid = $('#bid').val();
var fees = (bid/100)*setFees;
// $("#total").val(total.toFixed(2));
$("#fees").text(' = ' + fees.toFixed(0) + currency);
$('#bid, #total').on('focusout', function(e) {
    e.preventDefault();
    e.stopPropagation();
});
$("#bid").on('keyup', function(e){
    var newbid = $(this).val();
    var newfees = (newbid/100)*setFees;
    var total = newbid-newfees;
    if($(this).hasClass('error')){
        $(this).removeClass('error');
    }
    if($.isNumeric(newbid) === false){
        $(this).addClass('error');
        return;
    }
    if(newbid > 0){
        $("#total").val(total.toFixed(0));
        $("#fees").text(' = ' + newfees.toFixed(0) + currency);
    } else {
        $("#total").val('');
    }
    if(e.keyCode == 9) { //fixing the typed value in case of tab press
       e.preventDefault();
       e.stopPropagation();
       $(this).val(newbid);
    }
});
$("#total").on('keyup', function(e){
    var totalTwo = $("#total").val();
    var feesTwo = (totalTwo/100)*setFees;
    var bidTwo = (+feesTwo)+(+totalTwo);
    if($(this).hasClass('error')){
        $(this).removeClass('error');
    }
    if($.isNumeric(bidTwo) === false){
        $(this).addClass('error');
        return;
    }
    if(totalTwo > 0){
        $("#bid").val(bidTwo.toFixed(0));  
        $("#fees").text(' = ' + feesTwo.toFixed(0) + currency);
    } else {
        $("#bid").val('');
    }
    if(e.keyCode == 9) { //fixing the typed value in case of tab press
       e.preventDefault();
       e.stopPropagation();
       $(this).val(totalTwo);
    }
});

如您所见，我尝试在 keycode == 9 上preventDefault 和 stopPropagation 但没有成功。您能给我一些指导吗？

Answer 1

你的数学是错误的。如果你的数学是正确的，那么你从一个盒子更新另一个盒子，然后立即做相反的事情也没关系。

rightbox = leftbox * (1 - setfees / 100)

所以

leftbox = rightbox / (1 - setfees / 100)