e.preventDefault() 后数字输入字段不断增加

Question

在 type="number" 的输入元素上侦听“点击”事件，如果 e.currentTarget.value 大于某个值，我想阻止输入增加。

我使用了e.preventDefault()，但是输入继续增加价值。我也试过e.stopImmediatePropagation()，输入继续增加值。我还检查了e.cancelable 的值，这是真的。同样在记录事件时，属性isDefaultPrevented 和isPropagationStopped 都为真。

我尝试的另一个解决方案是将输入的值设置回旧值，但随后一瞬间它发生了变化，这是不可取的。

有人知道为什么会这样吗？

// @method setFocus sets focus on input when clicked. Needed as FF won't focus if quantity is updated from spinners
// @return {Void}
,   setFocus: function setFocus (e)
{

    var value = parseInt(e.currentTarget.value, 10)
    , qty_avail = this.model.getStockInfo().stock
    , $input_quantity = this.$('[name="quantity"]');

    if(value > qty_avail)
    {

        e.preventDefault();
        this.$('.product-details-quantity-alert').html("There is only " + qty_avail + " piece(s) available with these options");
        this.$('.product-details-quantity-alert').css("display", "initial");

    }
    else
    {
        this.$('.product-details-quantity-alert').css("display", "none");
        $input_quantity.focus();
    }

    console.log(qty_avail);
    console.log(value);

}

Answer 1

input type="number"有max和min属性可以设置，可以设置max属性来约束元素从增加超过指定的数量。这可以使用 HTML 来实现，如下所示

<input id="quantity" type="number" name="quantity" min="0" max="100" >

您还可以使用 javascript 即时更新 max 属性（例如，下面的 javascript 代码将 max 更改为 90）

document.getElementById("quantity").setAttribute("max",90);

考虑下面的第三个选项

<input type="number" name="quantity" id="quantity" />

<script>
var myinput = $("#quantity")

myinput.on('input',restrictMax)
function restrictMax(){
    //set Maximum to 5
    var max = 5;
    var value = parseFloat($(this).val())
    if($(this).val() > max){
        $(this).val(max)
    }
 }
</script>

您也可以查看JSFiddle

希望对你有帮助