Как отправить форму нажатием Enter без кнопки отправки

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

Если в форме отсутствует видимая кнопка отправки, а вы хотите осуществить отправку по нажатию на клавишу Enter, просто добавьте элемент <input> в вашу форму. Как только фокус будет на поле ввода, нажатие Enter приведёт к отправке формы – таково стандартное поведение браузера.

<form action="submit">
  <input type="text" name="field">
  <!-- Такая кнопка будет незаметна, как ниндзя в ночи -->
</form>

Попробуйте установит курсор в поле ввода и нажмите Enter — форма будет отправлена, и вы не увидите никакой кнопки.

Использование атрибута hidden для создания невидимости

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

<form action="submit">
  <input type="text" name="field">
  <input type="submit" hidden>
  <!-- Это как сверхъестественное исчезновение! -->
</form>

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

Пределы доступности

Не забывайте, что даже если кнопка не видима, скринридеры «видят» её. Проявляйте заботу о всех пользователях: доступность — это залог успешной разработки.

Что делать со старыми браузерами?

А если ваши пользователи используют старые браузеры, типа IE7? В этом случае можете привлечь CSS свойство position: absolute для гарантированной работы.

<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;" tabindex="-1" />
<!-- С нами всегда ниндзя CSS! -->

Атрибут tabindex="-1" поможет скрыть элемент от навигации с использованием клавиши Tab.

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

Разработка под все условия

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

Мастерство на все случаи

Владение знаниями JavaScript и jQuery поможет добавить волшебства при работе с нажатием Enter, но настоящий мастер справится и без них.

$('form').on('keypress', function(e) {
  if (e.keyCode === 13) {
    $(this).submit();
    /* Вмешательство волшебства: нажат Enter и форма отправлена! */
  }
});

Однако учитывайте, что у пользователя может быть отключен JavaScript.

Важность тестирования

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

Учёт разнообразия устройств

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

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

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

Представьте соревнование на гоночной трассе (🏁) по разным дорожкам (🛣️):

Дорожка 1: [🔳📩(Поле формы) -> 🏁(Финиш/Клавиша Enter)]
Дорожка 2: [🔲🚫(Нет кнопки отправки) -> 🏃💨(Автоматический Enter)]
Дорожка 3: [🚩(Старт) -> ...⌨️(Пользователь печатает)... -> 🏁(Нажатие Enter для завершения)]

Иными словами:

- Пользователь заполняет поле формы (🔳 📩)
- В форме нет видимой кнопки отправки (🔲🚫)
- Пользователь нажимает `Enter` (🏁), и форма тут же отправляется (🏃💨)

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

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

1. <form>: элемент формы – MDN — на MDN Web Docs вы найдёте много полезной информации о элементе <form>.
2. Как инициировать клик кнопки при нажатии Enter — зайдите на W3Schools, чтобы узнать, как создать форму без видимой кнопки отправки.
3. JavaScript – функция при нажатии на Enter в поле <input> – Stack Overflow — хотите стать волшебником JavaScript? Обратите внимание на это обсуждение на Stack Overflow и освойте магию кода.
4. HTML Стандарт — получите ценные знания на страницах этого обширного труда, включая раздел, посвященный алгоритму отправки форм. Источник: W3C HTML Standards.
5. Отправка формы при нажатии Enter без кнопки отправки – Stack Overflow — на Stack Overflow можно найти полезные советы о том, как отправить форму, нажав Enter.
6. Обучение работы с формами – web.dev — на web.dev вы откроете для себя лучшие практики работы с формами на HTML.