javascript - jQuery : How to prevent insertion into input field after sum of multiple input fields has been reached?

Question

在通过 Google 和 stackoverflow 搜索后，我成功地得出了这段代码，但是，只有一个问题。

假设 amount_available是 125 。正确地说，我应该只能输入总和为 < 125 的数字。但我可以输入一位数更多的数字，例如 1111或大于 125 的 3 位数字喜欢 999 。我该如何纠正这个问题？除此之外，它工作得很好。

下面是我的代码:

<小时/>

JQuery

var amount_available = $('input[name=amount_available]').val();
$(".multiple_spec").on('keydown','input[name*=quantity]',function(e){
    var total_quantity=0;
    $(this).parents('[class*=multiple]').find('input[name*=quantity]').each(function(){
        var val = parseFloat($(this).val());
        if(isNaN(val))val = 0;
        total_quantity=(val+total_quantity);
    });
    if(total_quantity>amount_available){
        // Allow: backspace, delete, tab, escape, and enter
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
            // Allow: Ctrl+A
            (e.keyCode == 65 && e.ctrlKey === true) ||
            // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
            // let it happen, don't do anything
            return;
        }
        e.preventDefault();
    }
});

HTML

<input type="text" name="amount_available"/>
<div class="multiple_spec">
    <div class="some_class">
        <input type="text" name="quantity1"/>
        <input type="text" name="quantity2"/>
        <input type="text" name="quantity3"/>
    </div>
</div
<div class="multiple_price">
    <div class="random_class">
        <input type="text" name="quantity4"/>
        <input type="text" name="quantity5"/>
        <input type="text" name="quantity6"/>
    </div>
</div

Answer 1

您需要在 keyup 事件而不是 keydown 中进行验证，因为您无法访问其中的最新值。

像这样怎么样:

var $quantityInputs = $(".multiple_spec input[name*=quantity]");

$quantityInputs.on('keyup',function(e){

    var amount_available = +$('input.amount_available').val(),
        // Extract values from quantity input fields:
        total_quantity = $quantityInputs.map(function(i, el){ 
            return +$(el).val() || 0;
        // Add them all together:
        }).get().reduce(function(prev, curr){
            return prev + curr;
        }, 0);

    if(total_quantity > amount_available){
        console.log('total quantity exceeds available amount - do something');
        $(this).val(function(index,value){
            return value.substr(0,value.length-1);
        });
    }
});

http://jsfiddle.net/rwrLt4cm/6/