Оглавление

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

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

• select {[<Функция обратного вызова>]) — выполняется при выделении содержимого элемента. Если параметр не указан, то содержимое элемента будет полностью выделено.

 
В качестве параметра <Функция обратного вызова> указывается ссылка на функцию следующего формата.
function <Название функции> ([<Объект event>]) {
  // ...

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

 

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

<html>
<head>
<title>События формы</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(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>

 

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

<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити