HTML `<input type="number"> ` element - 独立于`step`自定义箭头按钮的增量值

Question

我有一个带有type="number"的 HTML <input>元素：

我想使用step值 1。也就是说，允许任何整数。 但是，我还希望箭头按钮将输入的值增加/减少某个值，例如 5。这可能吗？

从MDN 文档中，我找不到单独使用 HTML 来完成此任务的方法。 我也将接受涉及使用 javascript 拦截input事件以更改输入value的答案，但我不知道如何区分由于按键而导致的更改与由于单击箭头按钮而导致的更改。

Answer 1

您始终可以在 javascript 中捕获输入并使用parseInt将值转换为整数，并使用正常步骤来控制箭头步进。

使用这种方法，您不必担心区分步进和输入，因为无论如何步骤已经是整数。

 let nums = document.querySelectorAll("input[type='number']"); nums.forEach(function(e){ e.addEventListener("input",function(el){ el.target.value = parseInt(el.target.value) }); });

 <input type="number" step="4" />

Answer 2

目前无法直接捕获对微调器的点击，但有一些方法可以检测对它们的点击。

通过使用不同的事件，可以暂时调整步长。 但是，如果用户使用鼠标单击微调器，按住鼠标键并向上/向下按箭头键，则可能会导致一些不良影响：

 // fires ones right before the value is changed for the first time input.addEventListener("mousedown", ({ target }) => target.setAttribute("step", 5)); input.addEventListener("mouseup", ({ target }) => target.setAttribute("step", 1)); // fires after release of the mouse key, even if the user moved the mouse input.addEventListener("change", ({ target }) => target.setAttribute("step", 1));

 <input id="input" type="number" step="1" value="0" />

Answer 3

<label>覆盖

制作一个<label>覆盖在<input>的微调器按钮上，并在事件处理程序中在单击<label>时使用.stepUp()和.stepDown()方法。

在示例 A中， <label>以红色标出，两个嵌套的<b>以蓝色标出。 当然，轮廓仅用于演示，可以轻松删除。 见示例 A

XY 坐标

另一种方法是在 relpos 容器中放置一个 abspos ( abs olute positioned) <input> ，如果单击位于<input>微调按钮的 xy 坐标内，则更改step属性。 请参见示例 B。

详细信息在示例 A 和 B 中都有注释

示例 A

<label>覆盖

 // Bind <label> to the click event document.querySelector('.spinner').onclick = incDec; function incDec(e) { // Reference the tag the user clicked const clk = e.target; // Reference the <input> const int = this.previousElementSibling; // If the user clicked .inc... if (clk.matches('.inc')) { //...Increment <input> value by 5 int.stepUp(5); } // If the user clicked .dec... if (clk.matches('.dec')) { //...Decrement <input> value by 5 int.stepDown(5); } }

 .spinner { position: relative; top: -4px; right: 24px; z-index: 1; display: inline-flex; flex-flow: column nowrap; justify-content: center; align-items: center; width: 16px; height: 18px; outline: 1px dashed red; } .spinner b { display: inline-block; width: 100%; height: 50%; outline: 1px blue solid }

 <input id='int' type='number' min='0' step='1'> <label for='int' class='spinner'><b class='inc'></b><b class='dec'></b></label>

示例 B

XY 坐标

 // Reference <form> const UI = document.forms.UI; // Reference all form controls const IO = UI.elements; // Reference <fieldset> const set = IO.set; // Reference <input> const int = IO.int; // Define an empty array to xy coords let point = []; // Bind <fieldset> to 'mousemove' event set.onmousemove = xy; // Bind <input> to 'mousedown' event int.onmousedown = setPoint; /* Bind <input> to 'mouseup' event restore step attribute back to 1 */ int.onmouseup = e => e.target.step = 1; /* Assigns current xy coords within the perimeter of <fieldset> to array point */ function xy(e) { let x = e.clientX; let y = e.clientY; point[0] = x; point[1] = y; } /* Checks if the user is clicking the <input> spinner. If user is, then step attribute is changed to 5 */ function setPoint(e) { let x = point[0]; let y = point[1]; if (x > 215 && x < 231 && y > 30 && y < 51) { this.step = 5; } }

 html { font: 300 62.5%/1 Consolas; } fieldset { position: relative; width: 24rem; height: 5rem; } input { position: absolute; left: 2.5rem; top: 1.85rem; width: 19rem; font: inherit; font-size: 1.6rem; text-align: center; }

 <form id='UI'> <fieldset id='set'> <input id='int' type='number' min='0' step='1'> </fieldset> </form>