提问人：Arek TG 提问时间：11/6/2023 更新时间：11/6/2023 访问量：22
输入数字 - 使用箭头从分钟开始
Input number - using arrow starts from min
问：
在任何地方都找不到答案......
我在我的表格中有简单的输入类型编号。最小值和最大值（0 和 18）。我不想在该输入上设置值，只是将占位符设置为 18。
现在问题来了。当我单击增量箭头时，输入的值为 0...（分钟？ 我希望当我单击减少输入时会得到新值 - 17。
我怎样才能控制它？
答：
0赞
Burham B. Soliman
11/6/2023
#1
你可以将输入的值设置为你需要的值，然后继续，
在您的帖子中，您要求输入包含 As 值，因此在这种情况下，我们可以通过将输入值设置为 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>
评论