Question

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

我的目标是实现此行为：

当用户点击原生向下箭头或按向下箭头键并且当前值为100时，该值将更改为-101。
同样，当用户点击本机向上箭头或按向上箭头键并且当前值为-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子句，并首先检查该值是正还是负，然后检查单独的长度。

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

2 个答案: