Как менять input в реальном времени?

Question

[JohnJohnsss]

Есть поле input, в которое пользователь должен ввести число. Как можно сделать так, чтобы если пользователь вводил число, меньше, чем заданное(например 50), то input.value автоматически менялся на 50?

Answer 1

[profesor08]

Для этих целей лучше использовать атрибуты min, max для input с типом number.
<input type="number" min="50" />

Но если хочется js, то пример обработчика. Тут еще надо будет решить, что удобнее случать, input или change

Answer 2

[Сергей Соколов]

Слушать событие "change" на элементе и в обработчике события корректировать значение.

Comments

[iBird Rose]

я бы еще про debounce упомянул. ибо без него или без таймаута он свою задумку нормально не реализует)

[profesor08]

iBird Rose, почему?

[iBird Rose]

profesor08, ну как я понял из условия - минимум 50, но максимума нет. и если делать по эвенту input без debounce и таймаута, то я не смогу ввести к примеру число 100. при вводе 1 - меня сразу кинет на 50 и оставшиеся 2 нуля я уже введу на 5000

[profesor08]

iBird Rose, тогда надо слушать change ивент. Либо не морочить себе голову и использовать стандартный атрибут min="50"

[iBird Rose]

profesor08, ну с точки зрения логики да, но с точки зрения ui и удобства тоже не то. потому что пока в фокусе - ничего происходить не будет. и я решение вроде уже предложил. оно достаточно популярно и используется во всяких плагинах быстрого поиска и т.д. раньше такое делали через таймаут. сейчас через debounce

[profesor08]

iBird Rose, но это не плагин быстрого поиска. Что если я введу единицу, а через секунду еще единицу, а через секунду еще единицу? А если через полторы? Если же говорить про ux, то юзеру надо дать понять, что он делает не так, например вывести под инпутом сообщение. И при этом не надо ограничивать юзера в действиях, которые приводят к неудобству (изменение значения инпута в input ивенте, или по таймеру).

Answer 3

[Василий Назаров]

Ответ не совсем про то, о чём вопрос.
Но вообще-то, это, мягко говоря, невежливо по отношению к пользователю - втихаря менять его ввод на своё.
Втихаря - потому что так, как вы предполагаете, очень легко не заметить.
Почему бы такое поле не подсвечивать красным с подписью "Число должно быть не меньше ..."?

Тем более, на сервере всё равно это нужно проверять опять, и отдавать ту же "красноту" с подписью.

Comments

[Алексей Дубровин]

Вот кейс
Нужна оплата на сайте от 100 рублей.
Мне ему выводить " о нет сумма меньше"
или сразу задавать минимальное значение которое ставиться по умолчанию
Обычный UX - Меньше лишних действий.

[Василий Назаров]

Алексей Дубровин, ставится по умолчанию - это одно
а менять введённое 50 на 100 - это, как я написал, не очень вежливо
но ради 100 рублей, конечно, можно о вежливости забыть

[Алексей Дубровин]

Василий Назаров,
Эм, пользователь пытается написать 88 рублей.
Я что должен это оставить и не как не валидировать?
Он решил стереть 100 рублей и написать 0

[Василий Назаров]

я же с этого начал
подсветите красным это поле, напишите под ним, какие значения допустимы

и, на всякий случай, напоминаю, что все эти ухищрения спокойно обходятся, и отправить на сервер 0 не составляет труда