input step. Трудности с шагом и произвольным числом

Question

Приветствую гайс.

<input class="filters-dropdown-input-text"  step="100000" name="cost_from" type="number" value="{{!is_null($cost_from) ? $cost_from: ''}}"  placeholder="от" min="0">

У input есть атрибут step. Он стоит у меня 100000, если я введу например 58000 то он пишет ошибку. Идея в том чтобы при нажатии на его стрелочку шаг был 100 000 , а при произвольном числе пропускал значение. Причем снова при нажатии, он по 100 000 работал. Знает кто как реализовать это?

Answer 1

Тут javascript не нужен. У тега input есть атрибут step.

<input type="number" step="100000"/>

Документация тут.

Answer 2

Придумал решение, может кому пригодится. По стилям осталось выровнять

let spanUp = document.querySelector('#up');
let spanDown = document.querySelector('#down');

let input = document.querySelector('input');

spanUp.addEventListener('click', function(){
    let inputval = input.value;
    if(input.value == "") {
    input.value = 100000;
    return false;
    }
  input.value = parseInt(inputval) + 100000;
});

spanDown.addEventListener('click', function(){
    let inputval = input.value;
    if(input.value == "" || input.value == "0") return false;
  input.value = parseInt(inputval) - 100000;
});

div.container { display:flex; align-items: center;}

input { padding: 15px; }
p { display:block; width: 20px; height: 20px; line-height: 20px; cursor: pointer; text-align:center; user-select: none;}
p.stepUp { 
 background: #81BEF7;  
 
}
p.stepDown { 
 background: #F5A9A9;
}

<div class="container">
      <input type="text">
  <div class="block-step">
    <p class="stepUp" id="up">+</p>
    <p class="stepDown" id="down">-</p>
  </div>
</div>

БЛОГ НА HUSL

input step. Трудности с шагом и произвольным числом

Ответы (2 шт):