Отправка формы HTML при нажатии Enter без кнопки Submit

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

Для простого решения вашего запроса — отправки формы нажатием клавиши Enter — всего лишь необходимо добавить в форму элемент <input type="submit">. Такой подход работает в большинстве браузеров, которые автоматически начинают отправку при этом действии, если в форме обнаружено поле отправки. Рассмотрим пример простейшей формы:

<form action="/submit-path">
  <input type="text">
  <input type="submit" hidden>
</form>

Сокрытие кнопки с type="submit" позволяет инициировать отправку формы, и при этом сама кнопка не показывается.

JavaScript для дополнительного контроля

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

document.addEventListener("DOMContentLoaded", function() {
  var form = document.getElementById("myForm");
  form.addEventListener("keypress", function(e) {
    if (e.keyCode == 13) {
      e.preventDefault(); // Отменяем стандартное действие отправки формы
      if (form.checkValidity()) {
        form.submit(); // Если все проверки пройдены, отправляем форму
      }
    }
  });
});

<form id="myForm" action="/submit-path">
  <input type="text" required>
  <input type="submit" class="hidden-button" hidden>
</form>

С помощью заданного в классе .hidden-button мы обеспечиваем невидимость кнопки:

.hidden-button { 
  position: absolute;
  left: -9999px;
  visibility: hidden;
}

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

Большую важность имеет забота не только о поддержке различных браузеров, но и о доступности сайта для разных групп пользователей. По этой причине использовать style="display: none" для таких целей — не лучшая практика, поскольку это может вызывать проблемы совместимости в старых браузерах и со скринридерами.

Альтернативное и более эффективное решение — это использование visibility: hidden или перемещение элементов за пределы видимости, как показано выше. Это также предотвратит трудности при навигации с клавиатуры, если значение tabindex установлено как -1.

Сохранение визуального стиля

Иногда возникает вопрос о том, как сделать кнопку функциональной и невидимой, но при этом интегрированной в документ. В этом случае, можно стилизовать <button>, чтобы он выглядел как div, сохранив при этом все функциональные возможности.

<button type="submit" class="button-like-div">Отправить</button>

.button-like-div {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font-size: 1em;
  color: inherit;
}

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

Давайте представим процесс нажатия клавиши Enter в виде яркой метафоры 🏎️:

Нажатие клавиши Enter (или возврата)...

🏎️💨 + 🏁 = 🎯

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

Чек-лист для эффективной отправки

• Проверка данных формы: Обязательно проверяйте корректность данных перед отправкой.
• Спользуйтесь JavaScript для управления отправкой по кодам клавиш.
• Будьте в курсе актуальности содержания вашей формы, используйте непрейденный HTML для сценариев с отключенным JavaScript.
• Ориентируйтесь на спецификации HTML5 и современные рекомендации.

Управление нестандартными случаями

• Автозаполнение: Предусматривайте возможность автоматической отправки формы в случае использования автозаполнения браузерами.
• Браузерные особенности: Прекрасно разбирайтесь в отличиях обработки нажатия Enter в различных браузерах.
• Постепенное улучшение: Основные функции формы должны работать без JavaScript. Это будет отправной точкой для дальнейших улучшений.

Практические сценарии

• Обеспечьте поддержку отправки форм на JavaScript в устаревших браузерах.
• Оптимизируйте формы для мобильных устройств, чтобы кнопка «Go» эмулировала Enter.
• Применяйте AJAX для отправки данных без необходимости перезагрузки страницы.

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

1. <form>: Элемент формы – HTML: HyperText Markup Language | MDN — обзор работы элементов форм HTML.
2. Element: keypress event – Web APIs | MDN — руководство по работе с событиями нажатия клавиш в JavaScript.
3. Learn Forms | web.dev — обучающий ресурс о формах HTML и методах их оптимизации.
4. JavaScript DOM EventListener — руководство по добавлению и управлению событийными слушателями в JavaScript.
5. KeyboardEvent Value (keyCodes, metaKey, etc) | CSS-Tricks — справочник по кодам клавиатурных нажатий JavaScript.
6. HTML Standard — раздел о формах HTML5 в стандарте HTML.
7. submit event | jQuery API Documentation — документация по событию submit в библиотеке jQuery.