Отмена отправки формы при нажатии Enter в JavaScript

Быстрый ответ

Вы можете предотвратить автоматическую отправку формы при нажатии клavиши Enter, используя обработчик события keypress. В этом обработчике следует проверить, равен ли event.keyCode значению 13, которое соответствует коду клавиши Enter. Если это так, используйте метод event.preventDefault(), чтобы прервать процесс отправки.

document.querySelector('form').addEventListener('keypress', function(event) {
  if (event.keyCode === 13) {
    // Стоп, отправка отменена!
    event.preventDefault();
  }
});

Переход к современности: event.key

В прошлом осталось использование keyCode. Вместо этого разработчики могут пользоваться свойством event.key, что делает их код более понятным и соответствующим современным стандартам.

document.querySelector('form').addEventListener('keypress', function(event) {
  if (event.key === 'Enter') {
    // Стоп, отправка прерывается!
    event.preventDefault();
  }
});

Совместимость с устаревшими браузерами: Полифилл

Внимание требуют также старые версии браузеров. Полифилл позволит имитировать работу event.key в случае его отсутствия.

if (!('key' in KeyboardEvent.prototype)) {
  var keyMap = { 13: 'Enter' };
  Object.defineProperty(KeyboardEvent.prototype, 'key', {
    get: function() {
      return keyMap[this.which || this.keyCode];
    }
  });
}

Надёжное управление ошибками: безопасность превыше всего!

Управление ошибками служит защитой вашего приложения, обеспечивая его устойчивость даже в условиях неожиданных проблем. Помните: код, защищенный от ошибок, – залог высокого качества!

Визуализация

Вы можете сравнить установление такого правила с управлением дорожного движения:

🚗💨🚦 (Форма готова к отправке)

• При нажатии Enter:

🚦🔴🚗💨 -> 🛑 (Сработало нажатие Enter! Отправка блокируется)

• Скрипт, который регулирует процесс:

form.addEventListener('keypress', function(event) {
    if (event.key === 'Enter') {
      // Сигнал 'Стоп' от клавиши Enter!
        event.preventDefault();
    }
});

Форма теперь не реагирует на нажатие Enter – процесс отправки контролируется:

🚗🚦🔴 (Контроль над формой при нажатии Enter)

Теперь форма находится под нашим надёжным контролем!

Динамические формы: делегирование событий

Для эффективного управления действиями в формах с динамически добавленными полями можно использовать делегирование событий. Обработчик следует навесить на постоянный родительский элемент и использовать event.target для идентификации дочернего элемента, вызвавшего событие.

document.addEventListener('keypress', function(event) {
  if (event.target.tagName === 'INPUT' && event.key === 'Enter') {
    // Проблемы, связанные с динамическими полями ввода, теперь не будут вас беспокоить!
    event.preventDefault();
  }
});

Современные возможности JavaScript

Применение современных особенностей языка, таких как стрелочные функции и деструктуризация, значительно упрощает чтение и понимание кода.

document.addEventListener('keypress', (event) => {
  let { key, target } = event;
  if (target.tagName === 'INPUT' && key === 'Enter') {
    // Модернизированная остановка отправки!
    event.preventDefault();
  }
});

Улучшение пользовательского опыта: оповещение о блокировке отправки

Для улучшения взаимодействия с пользователем рекомендуется информировать его о блокировке отправки формы при нажатии клавиши Enter. Как говорят: "Театр начинается с вешалки". То же относится и к интерактивным формам!

Полезные материалы

1. Метод Event: preventDefault() – Веб API | MDN — Получите знания, которые помогут вам остановить отправку формы.
2. HTMLFormElement: событие submit – Веб API | MDN — Узнайте всё о событии отправки формы.
3. javascript – jquery disable form submit on enter – Stack Overflow — Варианты решений с использованием jQuery.
4. Предотвратите отправку формы пользователями путем нажатия Enter – Stack Overflow — Полезные советы сообщества разработчиков.
5. JavaScript DOM EventListener — Глубокое погружение в работу с DOM EventListeners.
6. Рекомендации по улучшению взаимодействия с формами при помощи HTML и CSS | CSS-Tricks — Полезные советы по улучшению взаимодействия с формами.