Заставить шаг действовать как руководство в <input type = "number"> - PullRequest
Новая
       32

Заставить шаг действовать как руководство в <input type = "number">

0 голосов
/ 24 апреля 2018

Как сделать так, чтобы атрибут шага для <input type="number"> действовал больше как ориентир, чтобы я мог ввести любое положительное целое число, но стрелки увеличения могли бы изменить текущее значение на фиксированную величину.

например, яможет ввести 0,1,2,3,4,5,6,7, ... и шаг увеличит значения до 0,6,12,18,24, ... и т. д.

Я мог бы реализовать это, если бы знал, как фиксировать события перехода вверх / вниз в JavaScript.Тем не менее, я не могу найти способ сделать это.Я показал именно то, что я хотел бы в псевдокоде ниже: 

<input id="num" type="number">
<script>
  inp = document.getElementById("num");
  var increment = 6;
  if ( step up pressed ){
    inp.value += increment;
  }
  else if  (step down pressed ){
    inp.value -= increment;
  }
</script>

Ответы [ 2 ]

0 голосов
/ 24 апреля 2018

Это похоже на ужасный взлом, но вот ответ на мой вопрос: 

<input id='num' type=number step=0.00001 onchange="increment()">

<script>
    document.prev_num = document.getElementById("num").value;
    function increment() {
      var step = 6;
      var catch_step = 0.00001;
      var curr_num = parseFloat(document.getElementById("num").value);
      if ( Math.abs(curr_num - (document.prev_num + catch_step)) < 1e-7 ){
        curr_num  = curr_num - catch_step + step;
      }
      else if (Math.abs(curr_num - (document.prev_num - catch_step)) < 1e-7){
        curr_num = curr_num + catch_step - step;
      }
      else if (curr_num != parseInt(curr_num)){
        alert("You can only input integers.")
        curr_num = parseInt(curr_num);
      }
      document.getElementById("num").value = curr_num;
      document.prev_num = curr_num;
    }
</script>

Таким образом, HTML заставляет числа быть кратными 0,00001, что включает все целые числа.

Затем Javascript действует при изменении номера. Если это изменение всего лишь 0,000001, кнопка шага почти наверняка была нажата.

Нецелые не принимаются.

0 голосов
/ 24 апреля 2018

Будет ли это работать? 

<input id="num" type="number" step="6">
...