Отправка формы клавишей Enter без кнопки Submit

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

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

<form action="/target">
    <input type="text">
    <!-- Немного магии скрытого элемента... -->
    <input type="submit" hidden>
</form>

В случае такой конструкции, нажатие на Enter в текстовом поле активирует невидимый элемент submit input и производит отправку, исключая необходимость в JavaScript.

Далее: использование jQuery для улучшенного контроля

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

Управление поведением формы при помощи jQuery

С использованием jQuery можно настроить поведение формы в процессе её отправления:

$('input[type="text"]').keypress(function(event) {
  if(event.which == 13) { 
      event.preventDefault();
      $(this).closest('form').submit();
  }
});

Данный скрипт "ловит" нажатие Enter (keyCode 13), предотвращает автоматическую отправку и инициирует её согласно инструкциям разработчика.

Сокрытие кнопки отправления формы при помощи CSS

Возникают случаи, когда кнопка отправки формы должна быть скрыта. Вот тут на помощь приходит CSS свойство display: none;:

input[type="submit"] { 
    display: none;
}

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

Использование события keydown для оптимизации работы

$('input[type="text"]').keydown(function(event) {
    if(event.keyCode == 13) {
        $(this).closest('form').submit();
    }
});

Использование обработки события keydown вместо keypress позволяет форме быстрее реагировать на нажатия, уменьшая время между нажатием клавиши и отправкой формы.

Решение для работы без JavaScript

Если вдруг JavaScript отключен, можно использовать скрытый элемент для отправки:

<noscript>
    <style> .js-submit { display: block; } </style>
</noscript>
<input type="submit" class="js-submit" hidden />

Данный подход срабатывает и активирует класс .js-submit, благодаря тегу noscript, если JavaScript недоступен.

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

Превращаем клавиатуру (⌨️) в средство отправки сообщений. Нажатие Enter (↵) отправляет бумажный самолётик (🛩):

[Пользователь вводит] 'Привет, мир!' 🌎
[Пользователь нажимает Enter ↵]

И наш самолётик отправляется:

⌨️ ----------> 🛩💨 ------> ✅ 'Сообщение доставлено!'

Enter без кнопки отправки быстро и эффективно отправляет сообщение.

Управление множественными элементами: поля ввода и формы

Когда форма содержит несколько полей или форм, требуется особый подход. Здесь также может помочь jQuery.

Указание на конкретные формы: использование ID

$('#myForm input').keydown(function(event) {
    if(event.keyCode == 13) {
        event.preventDefault();
        $('#myForm').submit();
    }
});

Указав ID форме, можно точно контролировать её поведение среди других форм.

Нахождение ближайшей формы с использованием jQuery

$(this).closest('form').submit();

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

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

1. Проверка ограничений – HTML: Язык гипертекстовой разметки | MDN — подробное обсуждение методов валидации форм HTML5.
2. Javascript – обработка нажатия клавиши Enter в текстовом поле ввода – Stack Overflow – рекомендации сообщества на тему отправки форм при помощи клавиши Enter.
3. Обработчики событий DOM Javascript — изучение механизма обработки событий в JavaScript.
4. Событие onsubmit в HTML — обзор возможностей по обработке событий отправки форм.
5. Оформление модальных окон | CSS-Tricks — от отправки форм к оформлению модальных окон.
6. HTML стандарт — принципы отправки форм согласно стандартам HTML.
7. Событие submit в jQuery — освоение порядка отправки форм с помощью метода jQuery .submit().