Space Base Space Base
+7 928 008-80-89
ru
  • en
  • es
  • Главная
  • Услуги
  • Портфолио
  • Библиотека
  • Контакты
  • Главная
  • Услуги
  • Портфолио
  • Библиотека
  • Контакты
  1. Библиотека
  2. HTML, CSS, jQuery
  3. Отмена отправки (submit) нажатием Enter в поле формы
logo

Отмена отправки (submit) нажатием Enter в поле формы

25.10.2016

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

Частично эту проблему решают дополнительные обработчики проверки корректности заполненных данных, которые либо остановят отправку, либо сообщат об ошибке и позволять продолжить ввод. Но иногда, проще просто отключить этот механизм.

Для этого достаточно добавить свой обработчик на событие ввода данных. Делается это установкой кода, который при событии нажатия клавиши клавиатуры OnKeydown проверяет, является ли эта клавиша Enter. Если нажата клавиша ввода, то процедура действия останавливается. В противном случае продолжается обработка события по умолчанию – просто ввод данных.

Простейшим способом будет добавление атрибута события непосредственно в тег поля формы:

<input type="text" name="my_text" onkeydown="if(event.keyCode==13){return false;}" />

Здесь, на событие onkeydown (нажатие клавиши клавиатуры) выполняется простой скрипт проверки, не является ли код вводимого символа равным 13 (клавиша Enter). Если код именно этот, то строка return false; останавливает выполнение обработку этого события.

Данное решение не очень удобно, если полей на форме много. Соответственно, нужно либо проставить этот обработчик для каждого поля, либо прописать общий скрипт для всех. Это проще сделать средствами библиотеки JQuery.

$(document).ready(function() {
$("input[type=text]").keydown(function(event){
if(event.keyCode == 13){
event.preventDefault();
return false;
}
});
});

Здесь выполняется тот же самый механизм, за исключением того, что следует указать, какие поля формы будут реагировать на событие keydown указанным способом. Например, можно указать специальный класс для тегов полей, которым можно выборочно назначить нужные поля:

$(".stop-enter").keydown(function(event){

Или сделать для всех текстовых полей:

$("input[type=text]").keydown(function(event){

Следует еще обратить внимание, что не стоит этот скрипт связывать с многострочным полем textarea, т.к. в нем Enter, добавляет символ перехода на новую строку, а не отправку данных формы. Если это сделать, то по нажатию ввода переход на новую строку срабатывать не будет.

Другие материалы:

Звук по нажатию на ссылку


Установить, снять галочку, узнать состояние CheckBox в jQuery


Отправка (submit) формы после выбора файла с оформлением input[file]


Написать комментарий

Комментарии

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


коммент.

Разработка сайтов

Корпоративный сайт
Интернет-магазин
Лендинг - одностраничный сайт
Сайт-визитка
Сайт-портфолио

Проектирование

Прототип, UX-дизайн

Дизайн

UI-дизайн
Логотип

+54 911 2801-4950

info@space-base.net
+7 928 008-80-89

Web-сайты для успешного бизнеса

Web-сайты для успешного бизнеса

Главная Услуги Портфолио События Библиотека Контакты
+7 928 008-80-89 Меню
Политика в отношении обработки персональных данных © Copyright 2014 - | Space-Base

Лучшее время начать свой проект - Сейчас!

Выбраны опции:

Отправить сообщение на:

Telegram WhatsApp

Отправляя сообщение, вы даете свое согласие на
обработку песональных данных