Обработка нажатия Enter в одиночном поле формы HTML

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

Чтобы предотвратить автоматическую отправку формы, содержащей одно текстовое поле, при нажатии на клавишу Enter, рекомендуется использовать обработчик события нажатия на клавишу:

input.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') e.preventDefault(); // блокируем это событие
});

Данный код отменяет событие нажатия клавиши Enter, тем самым предотвращая непредвиденную отправку формы.

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

Подробное рассмотрение

Скрытые поля на руку

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

<input type="text" name="visibleInput">
<input type="hidden" name="hiddenInput">  // крытый нам помощник

Такое поле остаётся невидимым для пользователей, но позволяет форме соответствовать стандартам HTML: формы, содержащие более одного текстового поля не будут автоматически отправляться при нажатии клавиши Enter.

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

Особенности работы с Internet Explorer

В устаревших версиях IE, включая IE6/7/8, существует известный баг, вызывающий автоматическую отправку формы при нажатии на клавишу Enter. Для решения этой проблемы можно воспользоваться фиктивным текстовым полем или элементом input:

<input type="text" name="userInput">
<input type="text" style="display:none;" name="invisibilityCloak"> // Хотя вы меня не видите, я здесь!

Учтите, что CSS свойство visibility:hidden здесь не подойдёт — используйте display:none или aria-hidden="true" для сохранения доступности элемента.

Комфорт пользователя на первом месте

Для обеспечения удобного взаимодействия пользователя с формой, лучше всего предотвратить стандартное поведение отправки данных при нажатии на клавишу Enter с помощью обработчика событий:

form.addEventListener('keypress', function(e) {
  if (e.keyCode === 13) {
    e.preventDefault();  // Куда ты, клавиша Enter, поторопился?
  }
});

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

Грамотное формирование формы

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

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

Представьте себе ситуацию с бегуном (🏃‍♂️), который должен преодолеть одно препятствие (🚧):

Старт: 🏁 [🏃‍♂️] Финиш (Отправка формы): 🏁 Препятствие (поле ввода): 🚧

Нажатие клавиши Enter можно уподобить стартовому выстрелу (🔫):

🏁 -> 🏃‍♂️💨-> 🚧 -> 🏁

Когда бегун (🏃‍♂️) достигает препятствия (🚧), он автоматически его преодолевает и отправляет форму — справиться с финишем больше ничего не требуется. Всего одно препятствие и один скачок — и вот форма уже отправлена.

Таким образом, по умолчанию форма с одним полем ввода отправляется после заполнения этого поля и нажатия клавиши Enter.

Советы:

Используйте клиентские скрипты

Для контроля поведения форм используйте клиентские скрипты:

• Предотвратите срабатывание клавиши Enter с помощью JavaScript или jQuery.
• Обеспечьте совместимость в разных браузерах, проводя тестирование, особенно для более старых версий IE.

Когда нажатие "Enter" не должно отправлять форму

Блокируйте клавишу Enter в случаях, когда:

• Используется автозаполнение с одним полем: чтобы предотвратить отправку формы, когда пользователь выбирает предложение из списка автозаполнения.
• Работа идет с поисковыми строками: это позволит пользователям уточнить запрос, не выполняя преждевременный поиск.
• Требуется пошаговый ввод данных: в случае, когда пользователь должен провести тонкую настройку ввода без отправки формы.

Стратегический дизайн форм

Следующие рекомендации помогут вам избежать случайной отправки форм:

• Используйте архитектуру с множественными полями. Даже наличие скрытого поля может изменить поведение формы.
• Типы кнопок: Сделайте кнопки отправки ярко выраженными и видимыми, чтобы пользователи не отправляли форму случайно.
• Инструкции для пользователя: Предоставляйте понятные указания, чтобы уменьшить риск случайной отправки формы.

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

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

1. Веб-формы — Работа с пользовательскими данными – Учебник по разработке веб-сайтов | MDN — подробное руководство по работе с HTML-формами и их отправке от MDN.
2. HTML Стандарт — официальное описание HTML, в котором расскрываются подробности отправки форм.
3. javascript – jquery disable form submit on enter – Stack Overflow — обсуждение на Stack Overflow о том, как предотвратить автоматическую отправку формы при нажатии на клавишу Enter.
4. Формы: событие и метод submit — руководство по управлению формами в JavaScript, включая обработку событий отправки.
5. event.preventDefault() | jQuery API Documentation — описание функции event.preventDefault(), используемой при отправке форм, по документации jQuery.
6. Sensible Forms: A Form Usability Checklist – A List Apart — чек-лист по улучшению удобства использования веб-форм на портале A List Apart.