如何检测 html input[number] 的上下点击?

How to detect up and down clicks on html input[number]?

我有一个 html <input type="number"> 框,其中包含一些自定义验证逻辑。有效值是任何整数 x,其中 x < -100x >= 100

我的目标是实现此行为:

  1. 当用户点击原生向下箭头或按下向下箭头键且当前值为100时,值变为-101
  2. 类似的,当用户点击原生向上箭头或者按下向上箭头键,当前值为-101,值变为100

一些注意事项:

我不确定我是否得到了你想要的。是这样的吗?

 var number = document.getElementById('number-input');
 number.onchange = function(event) {
  if(number.value > 100) {
   number.value = -101;
  } else if(number.value < -100) {
   number.value = 101;
  }
 };
<input type="number" id="number-input">

我想我有你需要的东西,或者至少我已经接近了:

window.onload = function() {
  function changeNum(input, typing) {
    var lower=-101, upper=100, x=parseInt(input.value), active=(input==document.activeElement);
    if ((typing && String(Math.abs(x)).length>2 && lower<x&&x<upper) || (!typing && lower<x&&x<upper)) {
      if (Math.abs(x-upper) < Math.abs(x-lower)) {input.value = (!active||typing?upper:lower);}
      else {input.value = (!active||typing?lower:upper);}
    }
  }
  document.getElementById("num").addEventListener("keyup",function(){changeNum(this,true);},false);
  document.getElementById("num").addEventListener("change",function(){changeNum(this,false);},false);
};
<input type="number" id="num" value="100" />
jsfiddle: https://jsfiddle.net/9zz0ra35/4/
codepen: http://codepen.io/anon/pen/Ndqbog

  • 当用户单击输入的向上和向下按钮时,值会在阈值上限和下限之间翻转(-100 -> 10099 -> -101)。
  • 当用户键入一个值然后在输入外单击时,无效值将更改为最接近的阈值(-100 -> -10199 -> 100)。
  • 在键入时,无效值也会更改为最接近的阈值,但前提是 value.length 超过 2 个字符 (-100 -> -101)。
    • 最后一个不像其他的那么干净,因为它只有在下阈值和上阈值具有相同长度(在本例中为 3 个字符)时才有效。
      但是如果您需要不同长度的阈值,您总是可以将 String(Math.abs(x)).length>2 更改为一个额外的 if 子句并首先检查该值是正数还是负数,然后检查单独的长度。