输入数字 - 使用箭头从 min 开始

Question

到处都找不到答案...

我的表单中有简单的输入类型数字。最小值和最大值（0 和 18）。我不想在该输入上设置值，只需将占位符设置为 18。

现在问题就出来了。当我单击增量箭头时，输入的值为 0...（分钟？） 我期待当我点击减少输入时将获得新值 - 17。

如何控制？

Answer 1

您可以将输入的值设置为您需要的值并继续， 在您的帖子中，您要求输入包含

18

作为值，因此我们可以在这种情况下将输入值设置为 18

一个很小的例子

let buttons = document.querySelectorAll('.btn')
let numBox = document.getElementById('numBox')
buttons.forEach((btn) => {
  btn.addEventListener('click', () => {
    if (btn.className.includes('arrowUp') && numBox.value < 18) {
      numBox.value++
    } else if(btn.className.includes('arrowDown') && numBox.value > 0){
      numBox.value--
    }
  })
})

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* Firefox */

input[type=number] {
  -moz-appearance: textfield;
  font-size: 2rem;
  font-weight: bold;
  width: 4rem;
  text-align: center;
}

.numbering {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}

.arrows {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.arrowUp,
.arrowDown {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 1.5rem;
  border: 1px solid gray;
  padding: 0rem .5rem;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
}

.arrowDown {
  transform: rotate(180deg);
  background: red;
}

.arrowUp {
  background: green;
}

<div class='numbering'>
  <input id='numBox' type='number' min='0' max='18' value='18' disabled />
  <div class='arrows'>
    <button class='btn arrowUp'>^</button>
    <button class='btn arrowDown'>^</button>
  </div>
</div>