Как мне изменить значения инпута?

Question

[kentos]

Здравствуйте, написал функцию, которую повесил на onChange и отслеживает ввод в инпут, но мне нужно ограничить ввод, чтобы нельзя было ввести меньше 100 и больше 300

const changeInputHandler = (e) => {
    let valueInput = +e.target.value;
    if (valueInput  < range.min) valueInput  = range.min;
    if (valueInput  > range.max) valueInput  = range.max;
    handleChange(value);
  };

Примерно так, в range.min == 100, в range.max == 300, но когда я ставлю хардкорно value < range.min то все редактируется, а если между 100 и 300, то не могу вписать цифру, всегда либо 100, либо 300, как можно исправить это?

Answer 1

[ThunderCat]

1) задать паузу в проверке, так как вы набираете 1 и тут же срабатывает условие минимум, набираете 0 и у вас в инпуте уже 1000 (100 от первого условия и еще 0 от вас) и тут же фигачится 300.

2) Проверку выполнять только если количество символов больше 2, повторно выполнять проверку при онблур и при отправке данных.

Answer 2

[Владислав Великоиваненко]

Либо делать проверку в реальном времени, и пока вводится до 100 цифр выдавать рядом сообщение "Минимум 100 цифр должно быть", либо, как написали в комментарии выше, уже после нажатия на условную кнопку проверять, сколько было введено и от этого строить логику дальше.

Comments

[ThunderCat]

Вопрос написан немного криво, range у парня это не количество символов, а цифровое значение. Тоже не сразу понял.

[Владислав Великоиваненко]

ThunderCat, а, вот оно что, ну тогда просто условие сделать, мол если трёхзначная цифра, то всё норм, а если нет и + если эта цифра > 300, то тогда иная логика, не? Ахах

Answer 3

[Irkov]

Народ, объясните, а чем плох вариант ограничиват с помощью атрибутов min, max в html? Ну кроме того, что это html и не всегда есть возможность задать значение атрибутов.

Comments

[ThunderCat]

В том что они позволяют вводить руками любые значения. Ошибка появится только в момент субмита формы, что совершенно бесполезно если отправка выполняется например аяксом.