html - HTML 数字输入中的多个步长值

Question

我正在尝试自定义 HTML 数字输入，以便 step 值在某个数字之后增加，然后在另一个数字之后增加更多。例如，这是我试图实现的增量模式:

1, 2, 4, 8, 12, 16, 20, 24, 32, 48, 64, 96, 128

1 是第一个增量，2 是下一个增量，然后是 4、8、12，依此类推。我一直在对此进行研究，但我找不到任何已经完成的例子。甚至在这个网站上也没有。我尝试使用 1,2,4,8,12,16,20,24,32,48,64,96,128 作为 step 值，但它恢复为 1 .

<input type="number" name="number1" min="1" max="128" step="1" value="1">

如何编写 step 值才能实现此目的，还是必须使用 JavaScript 来实现此目的？

Answer 1

在输入更改事件中，您可以将值更改为您的步骤。

var steps = [1, 2, 4, 8, 12, 16, 20, 24, 32, 48, 64, 96, 128];
var input = document.getElementById("inputSteps");
var inputVal = 1;
input.addEventListener("change", changeInputStep);

function changeInputStep() {
  var dir = 0;
  if (this.value > inputVal) {
    dir = 1;
  } else if (inputVal > 1) {
    dir = -1;
  }
  this.value = steps[steps.indexOf(inputVal) + dir];
  inputVal = parseInt(this.value);
}

<input type="number" name="number1" min="1" max="128" value="1" id="inputSteps">