强制使用“步骤”输入号递增的值。

Question

我创建了一个输入号。最小值1，最大值100。但是，我可以输入这个输入的值，而不是步骤。而不是5-10-15.

我希望手动输入的值自动增加到step值。用户输入7-离开输入后是10。我正在尝试聚焦，但我不知道如何做。

​

<input type="number" min="1" max="100" step="5" onfocusout="this.value = Math.round(step);">

​

举例说明。用户输入13 -得到15。他输入27 -得到30。

Answer 1

你可以：

• 得到值除以5的结果
• 将结果四舍五入到接近整数
• 并乘以5，得到用户输入的最接近的5值。 this.value = Math.round(this.value / 5) * 5；

​

<input type="number" min="1" max="100" step="5" onfocusout="var result = Math.round(this.value / 5) * 5; this.value = (result) ? result : this.min ;">

​

Answer 2

首先，您不应该侦听focusout事件，而应该侦听change事件，每当用户执行任何暗示用户输入值的操作时，就会触发这些事件。这将使浏览器和设备之间的行为更加一致。

其次，您可以通过执行Math.round(value / X) * X将一个值舍入到X的最近的倍数，并且可以使用Math.min(Math.max(A, value), B)将一个值限制在A，B内。

最后，min、max和step HTML属性直接对应于JavaScript HTMLInputElement对象的属性，后者是绑定到事件侦听器中this的对象。

把所有这些结合在一起，你就能得到这个。

​

<input type="number" min="1" max="100" step="5" onchange="this.value = Math.min(Math.max(this.min, Math.round(this.value / this.step) * this.step), this.max)">

​

注意，在您的代码中，min属性是1，它不是5的倍数，它告诉浏览器接受序列1、6、11、16、……中的值。这违反了我们的密码。如果您想要5的倍数，则需要确保min属性也是5的倍数。

HTML属性中的所有JS代码都很难阅读，因此此时您可能需要使用适当的事件侦听器，这样就可以将问题划分为更小的函数。

​

function clamp(a, value, b) {
    return Math.min(Math.max(a, value), b);
}

function roundTo(multiple, value) {
    return Math.round(value / multiple) * multiple;
}

function roundToStepOnChange(event) {
    const roundedValue = roundTo(this.step, this.value);
    const clampedValue = clamp(this.min, roundedValue, this.max);
    this.value = clampedValue;
}

document.getElementById("myInput").addEventListener("change", roundToStepOnChange);

<input id="myInput" type="number" min="5" max="100" step="5">

​

在该示例中，我将min属性设置为5，这样您就可以看到它没有任何问题地运行。