jQuery:如何防止在多个输入字段的总和达到后插入到输入字段

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

本文关键字：字段 输入 插入 jQuery 何防止      更新时间：2023-09-26

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

假设amount_available是125。按说，我应该只能输入< 125的总和，但我可以输入比1111大一位数的数字，或者比125大三位数的数字，比如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();
    }
});


<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

您需要在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/

相关文章：