如何检测html输入[数字]的上下点击？

Question

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

我的目标是实现这种行为：

1. 当用户点击原生向下箭头或按下向下箭头键，当前值为100时，值变为-101。
2. 同理，当用户点击原生向上箭头或按下向上箭头键，当前值为-101时，该值变为100。

一些注意事项：

• 用户必须仍然能够键入无效范围内的数字，因为他们可能需要键入10 才能键入109。并且已经为此进行了验证逻辑。
• 我正在使用 angularjs，但我怀疑该解决方案不会针对特定角度。
• 这是一个内部应用程序，仅适用于 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 子句并首先检查该值是正数还是负数，然后检查不同的长度。