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

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 函數，但這要復雜得多。