Методы обработки событий формы

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


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

• change (<Функция  обратного вызова>) — выполняется при изменении дан
ных в текстовом поле и перемещении фокуса на другой элемент формы либо при
отправке данных формы.

• submit ( [<Функция    обратного    вызова>] ) —  выполняется   при  отправке
данных формы. Если параметр не указан, то форма будет отправлена.

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

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

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

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

Листинг 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>

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *