Какие события нужно обрабатывать для получения значения из input и отправки на бэкэнд

Что проверяют

Знаете ли вы разницу между input, change и submit и умеете ли собрать надёжную отправку: без потери Enter, без двойных запросов и гонки ответов. Следом обычно просят реализовать поиск с подсказками или автосохранение поля.

Как отвечать

Сначала выберите событие под задачу:

• input: срабатывает на каждое изменение значения, включая вставку мышью, автозаполнение и перетаскивание. Подходит для живой валидации и поиска с подсказками;
• change: у текстового поля срабатывает при потере фокуса, если значение изменилось, а у checkbox, radio и select сразу при выборе. Годится для автосохранения отдельного поля;
• submit на <form>: главное событие для отправки. Ловит и клик по кнопке, и Enter в поле, а event.preventDefault() отменяет перезагрузку страницы. Значения удобно собрать через new FormData(form);
• compositionstart и compositionend: ввод через IME, когда слово ещё не дописано. Проверка event.isComposing не даёт отправить недописанное.

Для отправки на лету добавьте debounce примерно на 300 мс и отменяйте предыдущий запрос через AbortController, иначе поздний ответ на старый запрос перетрёт свежий результат. Для формы блокируйте кнопку на время запроса, проверяйте response.ok (сам fetch не отклоняет промис на 4xx и 5xx) и показывайте ошибку сервера рядом с полем. Встроенная валидация (required, pattern, checkValidity()) удобна, но проверка на бэкенде обязательна всё равно. Если пишете на React, скажите, что onChange там на самом деле подписан на нативный input.

Где спотыкаются

Читают значение в keydown или keyup. В keydown значение ещё старое, а вставка мышью и автозаполнение вообще не порождают событий клавиатуры.

Вешают отправку на click по кнопке вместо submit формы. Enter перестаёт работать, а кнопка без type="button" внутри формы ещё и перезагружает страницу.

Шлют запрос на каждый символ без debounce и отмены. Сервер получает десятки запросов, ответы приходят не по порядку, и в интерфейсе остаются подсказки к старому вводу.