HTML 数字输入：仅允许箭头按钮答案

【问题标题】：HTML Number Input: Only Allow Arrow ButtonsHTML 数字输入：仅允许箭头按钮
【发布时间】：2021-06-03 23:59:33
【问题描述】：

这就是我的意思：

是否可以只允许通过单击箭头按钮进行输入，而不允许实际输入？

即：我无法输入“11”，但是如果我单击向上箭头 11 次，它会转到 11？

这是我现在的输入字段：

        <input type="number" min="00" max ="99" id="timer02_min" 
        maxlength="2" value="00">

是否有一些本地方法可以做到这一点？或者我应该更多地研究按钮和一些样式？

【问题讨论】：

您似乎并不真正想要输入，而是希望按钮绑定到一个值，并且按钮将增加/减少分钟值。

标签： javascript html css input

【解决方案1】：

在keydown 事件中使用event.preventDefault()；

// no keyboard
document.getElementById("timer02_min").addEventListener("keydown", e => e.preventDefault());

// allow up/down keyboard cursor buttons
document.getElementById("timer02_min2").addEventListener("keydown", e => e.keyCode != 38 && e.keyCode != 40 && e.preventDefault());

no keyboard:
<input type="number" min="00" max ="99" id="timer02_min" 
        maxlength="2" value="00">
<br>
with up/down cursor keys:
<input type="number" min="00" max ="99" id="timer02_min2" 
        maxlength="2" value="00">

【讨论】：

【解决方案2】：

function change(n){
var num = document.getElementById("num");
var number1 = num.innerHTML;
var number = Number(number1);
var num2 = number.toString();
if(n == "s"){
  }else{
   number = number+n;
  }
  if(number <= 0){
  number = 0;
  }
  if(number > 99){
  number = 99;
  }
  if(num2.length == 1){
  var num1 = number;
  number = "0"+num1;
  }
  document.getElementById("num").innerHTML = number;
}
change("s");

.input{
 border-style: solid;
  border-color: gray;
  border-width: 1px;
  border-radius: 2px;
  padding: 1px;
  height: 26px;
  width: 40px;
  text-align: left;
  position: relative;
  padding-left: 10px;
}
.spinner-button {
  position: absolute;
  top: 0px;
  right: 0px;
}
#inc-button{
 padding-top: 3.5px;
 background-color: #ccc;
  width: 14.5px;
  text-align: center;
  margin-bottom: 1px;
  height: 10px;
  line-height: 10px;
  cursor: pointer;
   border: none;
   user-select: none; /* Standard */
}
#dec-button{
 cursor: pointer;
 padding-top: 3px;
 background-color: #ccc;
  width: 14.5px;
  text-align: center;
  margin: 0px;
  height: 10px;
  line-height: 10px;
  border: none;
  user-select: none; /* Standard */
}
#inc-button:hover,#dec-button:hover{
background-color: #b5b5b5;
}

<div id="timer02_min" class="input">
  <div id="num">00</div>
  <div class="spinner-button">
  <div onclick="change(1);" id="inc-button">+</div>
  <div onclick="change(-1);" id="dec-button">-</div>
  </div>
</div>

试试这个！

你想开始的号码放在#numdiv中。

【讨论】：