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

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

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

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>

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

Предыдущая статья Все статьи Следующая статья