Как зарабатывать больше и получать удовольствие от работы?
Вебинар

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

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

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

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

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

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

Кинга Идем в IT: пошаговый план для смены профессии

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

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

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

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

JS
Скопировать код
$('input[type="text"]').keypress(function(event) {
  if(event.which == 13) { 
      event.preventDefault();
      $(this).closest('form').submit();
  }
});

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

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

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

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

CSS
Скопировать код
input[type="submit"] { 
    display: none;
}

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

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

JS
Скопировать код
$('input[type="text"]').keydown(function(event) {
    if(event.keyCode == 13) {
        $(this).closest('form').submit();
    }
});

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

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

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

HTML
Скопировать код
<noscript>
    <style> .js-submit { display: block; } </style>
</noscript>
<input type="submit" class="js-submit" hidden />

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

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

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

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

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

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

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

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

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

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

JS
Скопировать код
$('#myForm input').keydown(function(event) {
    if(event.keyCode == 13) {
        event.preventDefault();
        $('#myForm').submit();
    }
});

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

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

JS
Скопировать код
$(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().
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Как можно отправить форму по нажатию клавиши Enter без отображения кнопки отправки?
1 / 5