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

【问题标题】：stepUp and stepDown don't work in Edge and IEstepUp 和 stepDown 在 Edge 和 IE 中不起作用
【发布时间】：2019-12-09 23:17:46
【问题描述】：

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/

【问题讨论】：

标签： html internet-explorer microsoft-edge

【解决方案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;
}

【讨论】：

【解决方案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，但这要复杂得多。

【讨论】：

一如既往，微软认为跟上并不重要。经典的！该功能非常苗条，您必须考虑检查下限并进行减法。有点棘手。