События формы

Для обработки событий формы предназначены такие методы.

  • focus([<Функция обратного вызова>]) — выполняется при получении фокуса элементом формы. Если параметр не указан, то элемент получит фокус ввода.
  • blur([<Функция обратного вызова>]) — выполняется при потере фокуса элементом формы. Если параметр не указан, то элемент потеряет фокус ввода.
  • change(<Функция обратного вызова>) — выполняется при изменении данных в текстовом поле и перемещении фокуса на другой элемент формы либо при отправке данных формы.
  • submit([<Функция обратного вызова>]) — выполняется при отправке данных формы. Если параметр не указан, то форма будет отправлена.
  • select([<Функция обратного вызова>]) — выполняется при выделении содержимого элемента. Если параметр не указан, то содержимое элемента будет полностью выделено.

В качестве параметра <Функция обратного вызова> указывается ссылка на функцию следующего формата:

function <Название функции>([<Объект event>]) {
   // ...
}

Элемент, вызвавший событие, доступен внутри функции через указатель this. Обратите внимание на то, что указатель this ссылается на элемент объектной модели документа, а не на элемент коллекции jQuery. Если в параметре <Объект event> указана переменная, то через нее можно обратиться к свойствам объекта event.

Продемонстрируем обработку различных событий формы (листинг 6.4).

Листинг 6.4. События формы

<!doctype html>
<html>
<head>
<title>События формы</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
   $(":text").focus(function() {
      $(this).css("background-color", "#fffbef");
   }).blur(function() {
      $(this).css("background-color", "#ffffff");
   });
   $("#sel1").change(function(){
      alert("Значение выбранного пункта " + $(this).val());
   });
   $("form").submit(function(){
      if (window.confirm("Отправить данные формы?")) {
         return true;
      }
      else return false;
   });
   $(":text").select(function(){
      alert("Выделен фрагмент");
   });
   $("#btn1").click(function(){
      $("#txt1").select();
   });
   $("#btn2").click(function(){
      $("#txt1").focus();
   });
   $("#btn3").click(function(){
      $("#txt1").blur();
   });
   $("#btn4").click(function(){
      $("#frm").submit();
   });
});
</script>
</head>
<body>
<form id="frm">
<select id="sel1">
<option value="1">Пункт 1</option>
<option value="2">Пункт 2</option>
<option value="3">Пункт 3</option>
<option value="4">Пункт 4</option>
</select> 
<input type="text" id="txt1"> 
<input type="submit" value="Отправить">
</form> 
<input type="button" value="Выделить поле" id="btn1"> 
<input type="button" value="Установить фокус на поле" id="btn2"> 
<input type="button" value="Снять фокус с поля" id="btn3"> 
<input type="button" value="Отправить форму" id="btn4"> 
</body>
</html>

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

Самоучитель по jQuery
Самоучитель по jQuery Учебник по jQuery 3.5.1 и AJAX в формате PDF

Помощь сайту

Yandex-деньги: 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

Поиск по сайту в Яндексе