Javascript Html表单/jQuery：使用制表符更改输入可减少数值

在我用Html和jQuery构建的表单上发生了一件奇怪的事情。基本上，我创建了一个愚蠢的函数，它从插入到第一个输入中的金额中减去一个百分比（我的平台费用），然后将重新计算的金额放入第二个输入中。当然，情况正好相反

有点像：

• 输入1：你提供什么
• 输入2：您收到的内容（减除我的平台费用）

正如您通过图像所看到的（或多或少），当我插入第一个输入1000时，如果我的百分比为7%，则第二个输入将填充930。挺直的

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

这是我的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>

---

正如您所看到的，我在

keycode==9

上尝试了

preventDefault

和

stopPropagation

，但没有成功。您能给我一些指导吗？

当您在第一个框中输入内容时，您会更新第二个框：

var newbid = $(this).val();
var newfees = (newbid/100)*setFees;
var total = newbid-newfees;

newbid:                 1000
newfees: (1000/100)*7 = 70
total:   1000-70      = 930

然后，当按下tab键时，会在第二个框上触发keyup事件，这反过来会更新第一个框：

var totalTwo = $("#total").val();
var feesTwo = (totalTwo/100)*setFees;
var bidTwo = (+feesTwo)+(+totalTwo);

totalTwo:              930
feesTwo: (930/100)*7 = 65
bidTwo:  65+930      = 995

---

您应该更改事件的触发方式，以及您计算值的逻辑。

您正在检查函数末尾是否是按tab键。试着把它放在最上面

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){
        if(e.keyCode == 9) { //fixing the typed value in case of tab press
       e.preventDefault();
       e.stopPropagation();
       $(this).val(newbid);
    }
    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('');
    }
});
$("#total").on('keyup', function(e){
    var totalTwo = $("#total").val();
    var feesTwo = (totalTwo/100)*setFees;
    var bidTwo = (+feesTwo)+(+totalTwo);
    if(e.keyCode == 9) { //fixing the typed value in case of tab press
       e.preventDefault();
       e.stopPropagation();
       $(this).val(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('');
    }

});

---

你的数学错了。如果你的数学是正确的，那么，如果你从一个框中更新另一个框，然后立即执行相反的操作，这并不重要

rightbox = leftbox * (1 - setfees / 100)

所以

---

您是否尝试过使用不同的事件？我不认为在关键时刻是适当的事件。这将在每次按下一个键时触发（这反过来会扣除奇怪的金额）。我想.focusout（）就是你要找的。@ThomasK-mmm你有什么建议吗？我的意思是，我需要在键入时不断更新值<代码>向下键？我以前试过focusout（），但我并不喜欢它。有解决方法吗？我刚刚注意到if语句在末尾。将其移到顶部并返回。我认为在检查tab键之前，该值正在更新。另一个解决方案是添加一个按钮。然后计算该按钮的侦听器上的值，并询问您是否成功。现在可以了。让我们写一个答案！就这么做了。谢谢：）

rightbox = leftbox * (1 - setfees / 100)

leftbox = rightbox / (1 - setfees / 100)