Как определить вверх и вниз клики на входе html [number]?

Question

У меня есть поле html <input type="number">, в котором есть специальная логика проверки. Допустимым является любое целое число x, где x < -100 ИЛИ x >= 100.

Моя цель состоит в том, чтобы реализовать такое поведение:

1. , когда пользователь нажимает на нативный стрелке вниз или нажимает клавишу со стрелкой вниз и текущее значение 100, значение меняется на -101.
2. Аналогично, когда пользователь нажимает на собственную стрелку вверх или нажимает клавишу со стрелкой вверх, а текущее значение равно -101, значение изменяется на 100.

Несколько предостережений:

• Пользователи должны все еще быть в состоянии вводить цифры, которые попадают в недопустимом диапазоне, так как они, возможно, потребуется ввести 10 для того, чтобы напечатать 109. И для этого уже существует логика проверки.
• Я использую angularjs, но я подозреваю, что решение не будет угловатым.
• Это внутреннее приложение, предназначенное только для Chrome, поэтому ответы в браузере прекрасны.

Answer 1

Я думаю, что у меня есть то, что вам нужно, или, по крайней мере, я уже близко:

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).
• При наборе текста недопустимые значения также изменяются до ближайшего порога, но только если значение.length имеет более 2 символов (-100 -> -101).
  • Этот последний не так чист, как другие, поскольку он работает только в том случае, если нижний и верхний пороги имеют одинаковую длину (в данном случае 3 символа).
    Но если вам нужны пороговые значения с разной длиной, вы всегда можете изменить String(Math.abs(x)).length>2 на дополнительное if-предложение и сначала проверить, положительно или отрицательно это значение, а затем проверить отдельные длины.

Answer 2

Я не уверен, что получаю то, что вы хотите. Это что-то вроде этого?

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

<input type="number" id="number-input">