События формы и полей ввода в JavaScript

Поля формы меняются не только после клика. Пользователь печатает, вставляет текст, выбирает вариант, переходит между полями и отправляет форму. Для каждого такого момента браузер создаёт событие.

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

• Основные события
• input и change
• focus и blur
• Отправка формы
• Проверка данных
• Итого

Основные события

input и change

input срабатывает сразу после каждого изменения, которое сделал пользователь. Оно удобно, когда интерфейс должен реагировать на ввод без ожидания: показывать число символов, фильтровать список или обновлять предпросмотр.

change сообщает, что значение подтверждено. У текстового поля оно обычно срабатывает после потери фокуса, если значение изменилось. У списка или чекбокса - при выборе или переключении.

<label>
  Имя
  <input class="name-input" type="text" maxlength="30">
</label>

<p class="name-hint" hidden>
  Укажите имя, которое будет видно другим пользователям
</p>

<p class="name-result" aria-live="polite">
  Введите имя
</p>

const nameInput = document.querySelector('.name-input');
const nameResult = document.querySelector('.name-result');

nameInput.addEventListener('input', function () {
  const name = nameInput.value.trim();

  nameResult.textContent = name
    ? 'Привет, ' + name + '!'
    : 'Введите имя';
});

nameInput.addEventListener('change', function () {
  nameResult.textContent = 'Имя сохранено: ' + nameInput.value;
});

Во время набора текста работает обработчик input. Когда пользователь покинет поле после изменения, сработает change и заменит сообщение. Если реакция нужна сразу, выбирайте input, а не change.

Присваивание значения из JavaScript само не вызывает эти события. Например, после nameInput.value = ‘Анна’ обработчик input не запустится. Если интерфейс нужно обновить, вызовите нужную функцию явно.

focus и blur

focus происходит, когда поле получает фокус через клик, клавиатуру или вызов focus(). blur происходит, когда фокус уходит на другой элемент. Эти события полезны для подсказки или проверки поля после завершения ввода.

Добавим обработчики к предыдущему примеру:

const nameHint = document.querySelector('.name-hint');

nameInput.addEventListener('focus', function () {
  nameHint.hidden = false;
});

nameInput.addEventListener('blur', function () {
  nameHint.hidden = true;
});

Подсказка станет видна, пока пользователь работает с полем, и исчезнет после ухода из него. Если нужен только цвет рамки или другое визуальное оформление, обычно достаточно CSS-псевдокласса :focus.

Отправка формы

Событие submit возникает у элемента form, а не у кнопки внутри него. Оно обрабатывает саму попытку отправки формы: через кнопку type=“submit” или с клавиатуры. Поэтому обработчик назначают форме.

<form class="contact-form">
  <label>
    Имя
    <input name="name" required>
  </label>

  <label>
    Электронная почта
    <input name="email" type="email" required>
  </label>

  <button type="submit">Отправить</button>
</form>

<p class="form-status" aria-live="polite"></p>

const contactForm = document.querySelector('.contact-form');
const formStatus = document.querySelector('.form-status');

contactForm.addEventListener('submit', function (event) {
  event.preventDefault();

  const formData = new FormData(contactForm);
  const name = formData.get('name');

  formStatus.textContent = 'Спасибо, ' + name + '!';
});

FormData собирает данные формы. Чтобы значение поля попало в него, у поля должен быть атрибут name. Поэтому оба поля в примере получили это имя.

В примере event.preventDefault() отменяет обычную отправку формы, чтобы страница не перезагрузилась. Этот вызов сам не отправляет данные. В реальном приложении после него код отправляет данные на сервер, а для обычной HTML-формы отменять отправку не нужно.

У button внутри формы тип по умолчанию - submit. Если кнопка не должна отправлять форму, например открывает подсказку или добавляет поле, укажите type=“button”.

Проверка данных

Перед событием submit браузер проверяет ограничения из HTML. В примере required не даст отправить пустое поле, а type=“email” проверит формат адреса. Если поле не прошло такую проверку, событие submit не сработает.

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

Итого

Используйте input для мгновенной реакции на изменение значения, а change - когда значение подтверждено. focus и blur помогают работать с состоянием поля. Отправку обрабатывайте через submit на форме, используйте name для сбора данных и не забывайте о встроенной проверке полей.