Отключение отправки формы Enter в jQuery: Ajax submit

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

Если хотите запретить отправку формы при нажатии клавиши Enter, добавьте обработчик события keypress к элементу ввода. Для проверки нажатия Enter используйте условие event.keyCode === 13 и вызывайте event.preventDefault() в случае его выполнения. Примерно так:

$('input').keypress(function(event) {
  if (event.keyCode === 13) {
    event.preventDefault();
  }
});

Теперь давайте обсудим, как можно усовершенствовать этот подход для повышения безопасности и приспособляемости.

Направление для заблудших: Надёжная обработка событий

Двойная стена: Использование keyup и keypress

Чтобы охватить все возможные сценарии, используйте сразу два события: keyup и keypress. Этот подход обеспечит стабильную работу в различных браузерах, несмотря на их уникальные особенности обработки клавиатурных событий.

$('#myForm').on('keyup keypress', function(event) {
  var keyCode = event.which || event.keyCode;
  if (keyCode === 13) {
    event.preventDefault();
    return false;
  }
});

Подробнее об этом расскажет наш спикер на видео

Посланник эффективности: Использование on()

Метоd on() предоставляет вам удобную возможность привязать несколько обработчиков событий. Это облегчит отслеживание и поддержку вашего кода.

Метод почтальона: Отправка через AJAX

Для отправки формы с помощью AJAX используйте слушатель события submit. Это позволит вам проверять данные и отправлять их без перезагрузки страницы.

$('#myForm').on('submit', function(event) {
  event.preventDefault();
  var formData = $(this).serialize();
});

Подход Росток: Делегирование событий

С помощью делегирования событий вы сможете обрабатывать события даже у тех элементов формы, которые появились после загрузки страницы.

$(document).on('keypress', 'input', function(event) {
  if (event.keyCode === 13) {
    event.preventDefault();
  }
});

Осознанное UX: Предусмотрительность

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

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

Блокировка клавиши Enter не влияет на положение или состояние полей ввода. Они остаются доступными для ввода данных и ожидают вашей проверки перед отправкой формы.

Пример реализации на чистом JavaScript:

$('form').on('keyup keypress', function(e) {
  var keyCode = e.code || e.which;
  if (keyCode === 'Enter') {
    e.preventDefault();
    return false;
  }
});

Результат:

Было: Процесс заполнения формы (🔠🔢) + нажатие Enter (🚪🔑) = Форма отправлена (🥅) Стало: Процесс заполнения формы (🔠🔢) + запрет на Enter (🚪🛑) = Форма не отправлена, продолжайте работу! (⚽)

Погружение: Больше о безопасности форм

Постоянная бдительность: Обновление лучших практик

Следите за тенденциями индустрии и актуализируйте ваш код в соответствии с теми, которые наиболее актуальны.

Подстраиваемость форм: Работа с различными id и динамическими элементами

Универсальное решение для всех форм не существует, поэтому важно уметь адаптировать свой код к конкретным id форм и элементов.

Специфический обработчик: Использование специальных событий

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

Доступ для всех: Отзывчивость

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

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

1. submit event | jQuery API Documentation — подробное описание события jQuery .submit().
2. jQuery Event Methods — высокоуровневый справочник по методам обработки событий jQuery.
3. Event: preventDefault() method – Web APIs | MDN — подробное описание ключевого метода для предотвращения стандартного исполнения действий.
4. javascript – jquery disable form submit on enter – Stack Overflow — обсуждение различных решений проблемы отправки формы при нажатии клавиши Enter.
5. Tutorial | DigitalOcean — глубокое погружение в процесс назначения слушателей событий в JavaScript.
6. Handling Events | jQuery Learning Center — подробное руководство по обработке браузерных событий с помощью jQuery.
7. KeyboardEvent Value (keyCodes, metaKey, etc) | CSS-Tricks — полный справочник keyCodes, поможет вам распознать кнопки при обработке событий.