如何根据数字输入限制数字输入

时间:2016-03-20 18:58:36

标签: javascript

这是我第一次做大量的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份pizza1,5份pizza2,并准备加入2份pizza3(11种比萨饼),我怎么能在没有使用提交按钮的情况下限制他的输入实时?

谢谢

编辑:有三种以上的比萨饼。这只是我编写的代码的截图。

2 个答案:

答案 0 :(得分:1)

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”来修改条目。

答案 1 :(得分:0)

您可以将onchange事件侦听器添加到所有下拉框吗?这可以调用一个函数来检查3的值并设置10 - 它们的总和是第3个输入的最大值。 EDIT1:

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;
}

EDIT2: 我得到了它的工作,我会把它放在jsfiddle上,虽然它有点凌乱。无论如何我犯的错误是在计算最大值时计算输入的值,这意味着如果其中1个有5,它计算出它的最大值是10-(0 + 0 + 5)所以它不会让它过去5。