e.preventDefault()后数字输入框一直增加

Question

在类型="number" 的输入元素上监听 'click' 事件，如果 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 代码将最大值更改为 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

希望对您有所帮助

e.preventDefault()后数字输入框一直增加

Number Input Field Keeps Increasing after e.preventDefault()

javascript

jquery

input

preventdefault