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

Question

这就是我的意思：

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

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

这是我现在的输入字段：

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

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

Answer 1

在

event.preventDefault()

事件中使用

keydown

；

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

Answer 2

function change(n) {
  var num = document.getElementById("num");
  var number1 = num.innerHTML;
  var number = Number(number1);
  if (n != "s") {
    number = number + n;
  }
  if (number < 0) {
    number = 0;
  }
  if (number > 99) {
    number = 99;
  }
  var num2 = number.toString();
  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>

您要开始的编号将其放入

#num

div 中。