如何根据数字输入的总和限制数字输入

How can I limit numeric inputs based on their sum

本文关键字：数字输入 何根      更新时间：2023-09-26

这是我第一次做大量的javascript，所以如果这是一个基本问题，我深表歉意。

因此，对于订单的一部分，一个人可以订购总共 10 个不同类型的比萨饼。你可以在这里得到它的要点：

<div><h3>Types of Pizzas</h3></div>
    <div>
        <input type="checkbox" name="selections" id="pizza1"><label>pizza1</label>
            <div id="PC1">
                <label>How Many?</label><input type="number" min="0" oninput="validity.valid||(value='');" class="pizzaTotal">
            </div>
    </div>
    <div>
        <input type="checkbox" name="selections" id="pizza2"><label>pizza2</label>
            <div id="PC2">
                <label>How Many?</label><input type="number" min="0" oninput="validity.valid||(value='');" class="pizzaTotal">
            </div>
    </div>
    <div>
        <input type="checkbox" name="selections" id="pizza3"><label>pizza3</label>
            <div id="PC3">
                <label>How Many?</label><input type="number" min="0" oninput="validity.valid||(value='');" class="pizzaTotal">
            </div>
    </div>
因此，假设一个人输入了 4 个订单的披萨1、5 个订单的披萨2

，并且即将下达 2 个订单的披萨3（11 个披萨），我将如何在不使用实时提交按钮的情况下限制他的输入？

谢谢

编辑：比萨饼不止三种。这只是我编写的代码的屏幕截图。

function maxForm()
{
    var x = parseInt(document.getElementById("pizza1a").value);
    var y = parseInt(document.getElementById("pizza2a").value);
    var z = parseInt(document.getElementById("pizza3a").value);
    if (x>10)
        document.getElementById("pizza1a").value = 10;
    else if (x+y>10)
        document.getElementById("pizza2a").value = 10-x;
    else if (x+y+z>10)
        document.getElementById("pizza3a").value = 10-x-y;
}
<h3>Types of Pizzas</h3>
<form>
    <input type="checkbox" name="selections" id="pizza1"><label>pizza1</label>
            <label>How Many?</label><input type="number" id="pizza1a" min="0" onchange="maxForm();" class="pizzaTotal"><br>
    <input type="checkbox" name="selections" id="pizza2"><label>pizza2</label>
            <label>How Many?</label><input type="number" id="pizza2a" min="0" onchange="maxForm();" class="pizzaTotal"><br>
    <input type="checkbox" name="selections" id="pizza3"><label>pizza3</label>
            <label>How Many?</label><input type="number" id="pizza3a" min="0" onchange="maxForm();" class="pizzaTotal"><br>
</form>
<script src="maxform.js"></script>

这是检查值所需的 HTML 文件。我删除了我能找到的所有额外div。接下来，上面的 javascript 可以用作同一目录中的 "maxform.js" 来修改条目。

你能把onchange事件侦听器添加到所有的下拉框中吗？这可以调用一个函数，该函数检查 3 的值并设置 10 - 它们的总和是第 3 个输入的最大值。编辑1：

function maxForm()
{
    var x = parseInt(document.getElementById("pizza1a").value);
    var y = parseInt(document.getElementById("pizza2a").value);
    var z = parseInt(document.getElementById("pizza3a").value);
    var tot = x + y +z;
    document.getElementById("pizza1a").max = 10-tot;
    document.getElementById("pizza2a").max = 10-tot;
    document.getElementById("pizza3a").max = 10-tot;
}

编辑2：我让它工作，我会把它放在jsfiddle上，虽然它有点混乱。无论如何，我犯的错误是在计算最大值时计算输入的值，这意味着如果其中 1 个有 5，它会计算出其最大值为 10-（0+0+5），因此它不会让它超过 5。

相关文章：