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

Question

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

我的目标是实现此行为：

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

一些注意事项：

用户必须仍然能够键入落在无效范围内的数字，因为他们可能需要键入 10 才能键入 109。验证逻辑已经发生了。
我正在使用 angularjs，但我怀疑解决方案不会 angular 具体。
这是一个内部应用程序，仅供 Chrome 使用，因此浏览器特定的答案没问题。

Answer 1

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

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

Answer 2

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

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

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

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

html

angularjs

html-input