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>