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

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

Моя цель - реализовать это поведение:

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

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

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

html angularjs html-input
person Andrew Eisenberg    schedule 06.01.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

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).
  • While typing, invalid values are also changed to the closest threshold, but only if the value.length is more than 2 chars (-100 -> -101).
    • This last one isn't as clean as the others, because it only works if both the lower and upper threshold have the same length (in this case 3 chars).
      But if you need thresholds with different lengths, you can always change the String(Math.abs(x)).length>2 to an extra if-clause and first check whether the value is positive or negative, and then check for separate lengths.
person myfunkyside    schedule 06.01.2017
comment
Да. Это работает. Сам код можно немного почистить, но решение верное. Спасибо! - person Andrew Eisenberg; 06.01.2017
comment
@AndrewEisenberg, не могли бы вы обновить мой jsfiddle вашей очищенной версией и прокомментировать ссылку? Мне всегда нравится учиться, как улучшить свой код - person myfunkyside; 06.01.2017

arrow_upward
0
arrow_downward

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

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

person MarioZ    schedule 06.01.2017
comment
Это правильное направление, но это не сработает. У вас поменялись местами ‹ и ›. От -100 до 99 недействительно. 100 и больше или -101 и меньше являются действительными. Итак, нам нужно знать, увеличивалось или уменьшалось текстовое поле. А для этого нам нужно знать, каким было предыдущее значение. - person Andrew Eisenberg; 06.01.2017