От автора: приветствую вас, друзья. В этой статье мы продолжим изучение событий в jQuery. Мы уже рассмотрели события мыши и клавиатуры, пришла очередь узнать о событиях форм. Приступим.
С формами нам придется работать очень часто, поэтому знать и уметь использовать события форм в jQuery — практически обязательно. Я возьму произвольную форму и, чтобы она смотрелась более-менее хорошо, подключу CSS фреймворк Bootstrap. Код формы вы найдете в исходниках.
Первым событием будет событие focus. Как следует из названия, событие происходит в момент получения элементом фокуса, проще говоря, когда мы встали в то или иное поле формы. Пример:
|
1 2 3 |
$('form input, form select').focus(function(){ console.log('Focus!'); }); |
Теперь при клике по любому полю input или select мы получим вывод сообщения в консоль. Соответственно, теперь вы можете выполнять нужный набор действий при получении тем или иным элементом формы фокуса.
Следующее событие, наоборот, отслеживает потерю фокуса элементом — это событие blur:
|
1 2 3 4 5 6 7 |
$(function(){ $('form input, form select').focus(function(){ console.log('Focus!'); }).blur(function(){ console.log('blur'); }); }); |
Следующее событие — select. Можно подумать, что событие связано с выпадающим списком формы, но это не так. Событие наступает при выделении текста в текстовых полях формы (textarea и input типов text, email и т.п.), т.е. в полях, где можно ввести текст и затем выделить его:
|
1 2 3 4 5 6 7 8 9 |
$(function(){ $('form input, form select').focus(function(){ console.log('Focus!'); }).blur(function(){ console.log('blur'); }).select(function(){ console.log('select'); }); }); |
Событие change также будет достаточно полезным. Как следует из названия, событие change возникает в момент изменения элемента формы. Например, если мы изменим значение выпадающего списка, это вызовет событие change:
Также событие change произойдет и в том случае, если мы изменим любое другое поле. Например, введем текст в текстовое поле, а затем выйдем из поля (уберем фокус) или же отметим чекбокс, или наоборот, снимем отметку. Любое изменение — это событие change. Очень удобно по данному событию валидировать поля формы. Пользователь завершает ввод, переходит к следующему полю, а мы проверяем только что заполненное поле.
И последнее, но не менее важное на сегодня событие — submit. Это событие отправки формы. Достаточно популярное событие на сегодня, поскольку благодаря ему мы можем отменить отправку формы. Зачем нужно отменять отправку формы, спросите вы? Все просто. При отправке формы по умолчанию перезагружается вся страница. Если же мы не хотим полной перезагрузки, тогда можем отправить форму, используя AJAX. Для этого достаточно отменить дефолтное поведение при отправке формы, т.е. остановить отправку, собрать данные всех полей и отправить их без перезагрузки страницы.
Использование submit выглядит так:
|
1 2 3 4 |
$('form').submit(function(e){ console.log('Отправка формы...'); e.preventDefault(); // или return false; }); |
Теперь при клике по кнопке отправки формы мы увидим в консоли соответствующее сообщение, сама форма при этом не отправляется.
На этом сегодня все. Больше и jQuerу вы можете узнать из наших уроков или курса. Удачи!
