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

Question

Как я могу сделать атрибут шага для <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>

Answer 1

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

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

Answer 2

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

<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, кнопка шага была почти наверняка нажата.

Номера целых не будут приняты.