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

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

  • focus([[<Данные>, ]<Функция обратного вызова>]) — функция обратного вызова выполняется при получении фокуса элементом. Если параметры не указаны, то будут вызваны обработчики. Для установки фокуса ввода из программы лучше вызвать JavaScript-метод focus():
$('#txt1')[0].focus();
  • blur([[<Данные>, ]<Функция обратного вызова>]) — функция обратного вызова выполняется при потере фокуса элементом. Если параметры не указаны, то элемент потеряет фокус ввода;
  • focusin([[<Данные>, ]<Функция обратного вызова>]) — функция обратного вызова выполняется при получении фокуса элементом. Если параметры не указаны, то будут вызваны обработчики. В отличие от метода focus() метод focusin() поддерживает всплывание события;
  • focusout([[<Данные>, ]<Функция обратного вызова>]) — функция обратного вызова выполняется при потере фокуса элементом. Если параметры не указаны, то будут вызваны обработчики. В отличие от метода blur() метод focusout() поддерживает всплывание события. Пример изменения цвета фона текстового поля при получении и потери фокуса ввода:
<input type="text" id="txt1">
$('#txt1')
   .focusin( function() {
      $(this).css('background-color', '#fffbef');
   })
   .focusout( function() {
      $(this).css('background-color', '#ffffff');
   });
  • change([[<Данные>, ]<Функция обратного вызова>]) — функция обратного вызова выполняется при изменении пользователем данных в элементах <input>, <textarea> и <select>. При использовании текстовых полей событие генерируется при перемещении фокуса на другой элемент формы либо при отправке данных формы. Если используются флажки, переключатели или списки, то событие генерируется сразу после выбора;
  • submit([[<Данные>, ]<Функция обратного вызова>]) — функция обратного вызова выполняется при отправке данных формы. Если внутри обработчика вернуть значение false, то форма отправлена не будет. Если параметры не указаны, то форма будет отправлена;
  • select([[<Данные>, ]<Функция обратного вызова>]) — функция обратного вызова выполняется при выделении содержимого текстового поля. Если параметры не указаны, то содержимое поля будет выделено.

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

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

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

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

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

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <title>События формы</title>
</head>
<body>

<div class="container my-3">
  <form action="#" method="GET" id="frm">
    <div class="form-group">
       <select id="sel1" class="form-control">
          <option value="1">Пункт 1</option>
          <option value="2">Пункт 2</option>
          <option value="3">Пункт 3</option>
          <option value="4">Пункт 4</option>
       </select>
    </div>
    <div class="form-group">
      <input type="text" id="txt1" class="form-control">
    </div>
    <div class="form-group">
       <button type="submit" class="btn btn-primary">Отправить</button>
    </div>
  </form>
  <button type="button" class="btn btn-primary" id="btn1">
     Выделить поле</button>
  <button type="button" class="btn btn-primary" id="btn2">
     Установить фокус на поле</button>
  <button type="button" class="btn btn-primary" id="btn3">
     Отправить форму</button>
</div>

<script src="js/jquery.min.js"></script>
<script>
$(function() {
   $('#txt1')
      .focus( function() {
         $(this).css('background-color', '#fffbef');
      })
      .blur( function() {
         $(this).css('background-color', '#ffffff');
      })
      .select( function() {
         console.log('Выделен фрагмент');
      });
   
   $('#sel1').change( function() {
      console.log('Значение выбранного пункта ' + $(this).val() );
   });
   $('#frm').submit( function() {
      return window.confirm('Отправить данные формы?');
   });
   
   $('#btn1').click( function() {
      $('#txt1').select();
   });
   $('#btn2').click( function() {
      $('#txt1')[0].focus();
   });
   $('#btn3').click( function() {
      $('#frm').submit();
   });
});
</script>
</body>
</html>

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

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

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