HTML`<inputtype="number">`元素-獨立于`step`自定義箭頭按鈕的增量值

我有一個 HTML<input>元素type="number"：

` 元素 - 獨立于 `step` 自定義箭頭按鈕的增量值">

我想使用step值 1。也就是說，允許任何整數。但是，我還希望箭頭按鈕將輸入的值增加/減少某個值，例如 5。這可能嗎？

從MDN 檔案中，我找不到單獨使用 HTML 來完成此任務的方法。我也將接受涉及input使用 javascript 攔截事件以更改value輸入的答案，但我不知道如何區分由于按鍵而導致的更改與由于單擊箭頭按鈕而導致的更改。

uj5u.com熱心網友回復：

您始終可以在 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" />

uj5u.com熱心網友回復：

<label>覆寫

制作一個<label>覆寫 的微調器按鈕，<input>并在事件處理程式中在單擊時使用.stepUp()and.stepDown()方法<label>。

在示例 A中，<label>以紅色標出，而嵌套的兩個<b>以藍色標出。當然，輪廓僅用于演示，可以輕松洗掉。見示例 A

XY 坐標

另一種方法是在 relpos 容器中放置一個 abspos（絕對定位），如果單擊在微調器按鈕的 xy 坐標內，則更改屬性。請參見示例B。<input>step<input>

詳細資訊在示例 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>

uj5u.com熱心網友回復：

目前無法直接捕獲對微調器的點擊，但有一些方法可以檢測對它們的點擊。

通過使用不同的事件，可以暫時調整步長。但是，如果用戶使用滑鼠單擊微調器，按住滑鼠鍵并向上/向下按箭頭鍵，則可能會導致一些不良影響：

// 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" />

標籤：javascript html 形式 输入

上一篇：JavaScript-啟用/禁用單選按鈕的復選框

下一篇：如何從二維陣列php中修剪字串的一部分