Первый step в input[type=number] не обрабатывается. Что я сделал не так?

Question

[JRazor]

Доброго времени суток.

Пытаюсь сделать, чтобы увеличивался шаг при увеличении значения. Написал такой обработчик события:

function get_step(value) {
	if (value <= 999) {
    	return 100;
    } else if (value <= 9999) {
    	return ((value - value % 1000) / 1000 + 1) * 100;
    } else {
    	var length = value.toString().length;
    	return Math.floor(value / Math.pow(10,  length - 1)) * Math.pow(10, length - 2)
    }
}

$("#number").on('input', function(e) {
  var value = $(this).val();
  var step = get_step(value);
  $(this).attr('step', step);
});

Первый шаг увеличивается нормально, но как только значение доходит до 2000 - первый шаг не обрабатывается (значение было 2000, должно стать 2300, так как шаг 300, но становится 2100). То есть, шаг прописывается в input, но первая обработка происходит неправильно.

Желающие могут поиграться тут: https://jsfiddle.net/xpvt214o/887751/

Answer 1

[Владимир Проскурин]

Этот компонент немного не так работает. Он не добавляет к текущему числу число равное шагу, он устанавливает текущее число, к следующему числу кратному шагу. т.е. если у нас стоит 20, и шаг 3, какое следующее число делится на 3? 21, вот он и поставит 21, потом 24, 27, 30 и.т.д. Чтобы реализовать то, что вы хотите, нужно писать кастомный компонент.

Comments

[JRazor]

Опа, вот это новость. Спасибо, Владимир. Я бы еще долго пытался настроить его по человечески)