Отправка формы клавишей 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().