Question

stepUp和stepDown在Edge和IE中不起作用。

<span class="minusIcon" onclick="document.getElementById('quantity').stepDown(1)"">-</span>
<input type="number" name="quantity" min="1" disabled="disabled" max="10" id="quantity" class="quantity" value="1" />
<span class="plusIcon" onclick="document.getElementById('quantity').stepUp(1)">+</span>

JS小提琴：https://jsfiddle.net/ngcputf5/

Answer 1

如@ noah-b所指出，type="number"不支持这些方法。但是，type="range"支持它们。知道了这一点，您可以欺骗自己的方式来拥有本机stepUp和stepDown功能：

const numberField = document.getElementById('quantity');

numberField.type = "range";
try {
    // We have to use "try" here because when overstepping the min or max value, this method will throw an error, leaving our input field in the "range" type
    numberField.stepDown();
} finally {
    // IE11 discards the value when changing back to number so we have to reset it manually.
    const newValue = numberField.value;

    numberField.type = "number";
    numberField.value = newValue;
}

Answer 2

正确，不支持它们：https://www.w3schools.com/jsref/met_number_stepup.asp

我将创建一个AdjustQty函数并传递修饰符。

<script>
function adjustQty(modifier) {
    document.getElementById('quantity').value += modifier;
}
<script>


... onclick="adjustQty(1)" ...

您还可以将stepUp / stepDown函数添加到输入对象 prototype ，但这要复杂得多。

stepUp和stepDown在Edge和IE中不起作用

2 个答案: