Отправка (submit) HTML-форм при нажатии клавиши Enter

Общепринятой считается практика привязки js-валидации форм к событию form.onsubmit. Но я лишь недавно (и неожиданно для себя) нашел этому убедительное обоснование. Всё дело в странной обработке различными браузерами нажатия Enter в формах. Этой теме и посвящена данная статья. Исследования проведены в текущих версиях основных браузеров (IE, FF, Opera, Chrome и Safari).

Условия отправки форм по нажатию Enter

В Chrome и Safari, в любой форме с произвольным набором полей, нажатие клавиши Enter приводит к событию form.onsubmit. В IE, FF, Opera для отправки HTML-формы по нажатию Enter необходимо выполнение хотя бы одного из двух Условий:

наличие в форме инпута с type="submit" (или его графического варианта type="image");
- для IE и FF: суммарное количество инпутов с type="text" и type="password" в форме равно 1;
- для Opera: в форме должно содержаться не более одного инпута с type="text" и не более одного инпута с type="password".

Наличие Условия 2 и особого поведения Chrome и Safari означает, что не стоит привязывать js-валидацию к нажатию на обычную кнопку (событию button.onclick), так как она может быть пропущена из-за нажатия Enter даже если в форме нет инпутов с type="submit" и "image".

Цепочки js-событий, происходящие после нажатия Enter

Рассмотрим, какие события (помимо обычных onkey***) и в каком порядке происходят при нажатии клавиши Enter в зависимости от

типа инпута, на котором находится фокус
выполнения или не выполнения Условий 1 и 2
браузера

Ниже приведены таблицы - в ячеках которых расположены типы инпутов, вызывающие в браузере, указанном в строке, цепочку событий, указанную в стоблце.

Ситуация 1: выполнено Условие 2, но не выполнено Условие 1 (для Chrome и Safari: не выполнено Условие 1).

	form.onsubmit
Firefox 3.0.11	text, password, checkbox, radio
IE 7.0.5730.13	text, password, checkbox, radio
Opera 9.64	text, password, select
Google Chrome 2.0.172.31	text, password, checkbox, radio
Apple Safari 4.0 (530.17)	text, password, checkbox, radio

Все остальные типы инпутов "неактивны" относительно нажатия Enter - они не порождают никаких нестандартных событий.

Ситуация 2: выполнено Условие 1, но не выполнено Условие 2 (для Chrome и Safari: выполнено Условие 1).
Под элементом firstsubmit имеется ввиду первый в форме инпут типа submit или image (порядок, как ни странно, определяется положением в коде, а не значением атрибута tabindex). Под this - текущий инпут.

	firstsubmit.onclick -> form.onsubmit	this.onclick -> form.onsubmit
Firefox 3.0.11	text, password, checkbox, radio	submit, image
IE 7.0.5730.13	text, password, checkbox, radio	submit, image
Opera 9.64	text, password, select	submit, image
Google Chrome 2.0.172.31	text, password, checkbox	submit, image
Apple Safari 4.0 (530.17)	text, password, checkbox	submit, image

Все остальные типы инпутов "неактивны" относительно нажатия Enter.

Ситуация 3: Выполнены одновременно Условия 1 и 2 (для Chrome и Safari эта ситуация аналогична Ситуации 2, поэтому не рассматривается).

	firstsubmit.onclick -> form.onsubmit	this.onclick -> form.onsubmit	form.onsubmit
Firefox 3.0.11	text, password, checkbox, radio	submit, image
IE 7.0.5730.13	checkbox, radio	submit, image	text, password
Opera 9.64	text, password, select	submit, image

Все остальные типы инпутов "неактивны" относительно нажатия Enter.

Наличие особого поведения IE7 означает, что не нужно привязывать js-валидацию к нажатию на инпут с type="submit" (событие submit.onclick), так как она может быть пропущена из-за нажатия Enter даже если в форме всего один инпут с type="submit" и "image".

Вадим Назаров, июнь 2009