Как отключить отправку формы по нажатию Enter для отдельных полей

При разработке сложных веб-форм часто возникает ситуация, когда часть полей должна отправляться стандартным способом (через кнопку Submit), а другая часть - асинхронно через AJAX. Проблема в том, что нажатие клавиши Enter в любом поле ввода по умолчанию инициирует отправку всей формы. Рассмотрим, как программно отключить это поведение для выбранных элементов.

Почему форма отправляется по Enter?

Браузеры автоматически отправляют форму при нажатии Enter внутри любого поля <input>, если в форме есть кнопка <button type="submit"> или <input type="submit">. Это стандартное поведение HTML, которое не всегда удобно, когда часть полей обрабатывается асинхронно.

Решение: перехват события keydown

Самый надёжный способ - отловить нажатие Enter на конкретных полях ввода и предотвратить стандартное действие. Для этого используется JavaScript-обработчик события keydown или keypress.

Пример на чистом JavaScript

document.querySelectorAll('.ajax-input').forEach(function(input) {
  input.addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
      event.preventDefault();
      // Здесь можно вызвать вашу AJAX-отправку
    }
  });
});

В этом примере все поля с классом ajax-input перестанут инициировать отправку формы. Вы можете заменить селектор на любой другой: по ID, атрибуту или типу.

Пример на jQuery

$('.ajax-input').on('keydown', function(event) {
  if (event.which === 13) {
    event.preventDefault();
    // Ваш AJAX-запрос
  }
});

Код проверяет код клавиши: 13 - это Enter. event.preventDefault() блокирует отправку формы.

Альтернативный подход: отключить кнопку submit

Иногда проще временно отключить кнопку отправки формы, но это менее гибко. Например:

document.getElementById('submit-btn').disabled = true;

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

Что делать, если форма отправляется всё равно?

Проверьте, не висит ли обработчик на родительских элементах или на самой форме. Иногда библиотеки (например, старые версии jQuery Validate) автоматически подписываются на событие submit. Убедитесь, что вы вызываете event.stopPropagation() при необходимости.

Особенности для разных браузеров

Событие keydown поддерживается во всех современных браузерах. Свойство event.key ('Enter') - стандарт ES6. Для очень старых браузеров используйте event.which || event.keyCode.

Заключение

Чтобы форма не отправлялась при нажатии Enter на отдельных полях ввода, добавьте обработчик события keydown с вызовом event.preventDefault(). Это простое решение не ломает стандартную отправку для остальных элементов и позволяет гибко управлять поведением интерфейса. Рекомендуется присвоить целевым полям общий класс или атрибут для удобства селекции.