События фокуса. Ловим потерю фокуса. Метод blur() в jQuery Javascript событие потери фокуса

События фокуса происходят, когда форма, отчет или элемент управления в форме получают или теряют фокус, а также когда форма или отчет становятся активными или, наоборот, неактивными.

Вход

Событие Вход (Enter) происходит перед тем, как элемент управления в форме получает фокус от другого элемента управления в той же форме или когда при открытии формы получает фокус первый элемент управления. Его удобно использовать для вывода на экран каких-либо сведений об этом элементе. Оно происходит до события Получение фокуса (GetFocus), но после события Текущая запись (Current).

Выход

Событие Выход (Exit) происходит перед тем, как данный элемент управления передаст фокус другому элементу управления той же формы, но до события Потеря фокуса (LostFocus).

Замечание

События Вход (Enter) и Выход (Exit) не определены для флажков и переключателей в группах, они определены только для группы как целого. События Вход (Enter) и Выход (Exit) не происходят, если фокус переходит к элементу другой формы или отчета. Это отличает их от событий Получение фокуса (GetFocus) и Потеря фокуса (LostFocus).

Получение фокуса

Событие Получение фокуса (GetFocus) происходит, когда форма или элемент управления формы получают фокус. Элемент управления может получить фокус, только если оно видимо и доступно (его свойства Вывод на экран (Visible) и Доступ (Enabled) имеют значения Да). При этом событие Получение фокуса (GetFocus) происходит после события Вход (Enter). Форма может получить фокус, только если все поля в ней заблокированы, в противном случае событие Получение фокуса (GetFocus) для формы не возникает.

Потеря фокуса

Событие Потеря фокуса (LostFocus) происходит каждый раз, когда форма или элемент управления в форме теряют фокус. Событие происходит после события Выход (Exit).

Замечание

События Получение фокуса (GetFocus) и Потеря фокуса (LostFocus) происходят не только, когда фокус перемещается путем действий пользователя (с помощью клавиатуры или мыши), но и в результате вызова метода SetFocus объекта в форме или выполнения макрокоманд

ВыделитьОбъект(SelectObject), НаЗапись(GoToRecord), КЭлементуУправления(GoToControl) и НаСтраницу(GoToPage).

Кроме того, эти события определены для элементов (флажков и переключателей) внутри группы.

Включение

Событие Включение (Activate) возникает, когда форма или отчет получают фокус, становясь активной формой или отчетом. Это происходит, когда форма или отчет открываются, когда пользователь щелкает мышью на одном из элементов управления, перенося, таким образом, фокус, и когда в программе VBA выполняется метод SetFocus объекта. Форма при этом обязательно должна быть видима. Событие Включение (Activate) возникает до события Получение фокуса (GetFocus). Это событие удобно использовать для того, чтобы вывести на экран панель инструментов, связанную с формой.

  • Аналогичное событие есть для инициализации функций при закрытии документа — событие onUnload . Событие вызывается тогда, когда пользователь закрывает окно браузера или окно конкретной веб-страницы.
  • Вместо onUnload сегодня можно использовать onBeforeUnload
  • Вывод сообщений при использовании onUnload сегодня работает только в браузере IE
  • Рассмотрим пример двух вариантов использования события onload в javascript:

    Пример: По загрузке документа поместить в текстовое поле сообщение «Добрый день!» (запускать функцию)


    Выполнение:

    Скрипт:

    function printText() { document.getElementById ("txt1" ) .value = "Добрый день!" ; }

    function printText() { document.getElementById("txt1").value = "Добрый день!"; }

    HTML-код:

    Таким образом, при загрузке веб-страницы браузером произойдет вызов функции printText() , которая выведет в текстовое окно текст «Добрый день!»

    Скрипт:

    window.onload = function () { document.getElementById ("txt1" ) .value = "Добрый день!" ; }

    window.onload= function() { document.getElementById("txt1").value = "Добрый день!"; }

    В данном случае код полностью реализован в скрипте. Результат будет аналогичен.

    Задание js11_1.

    • Добавьте форму в документ и расположите в форме текстовое поле.
    • Добавьте обработчики событий onload и onunload для тега body .
    • Отождествите событие onload с отображением сообщения в текстовом поле «Здравствуйте» , а событие onunload - с отображением предупреждающего диалогового окна «До свидания!» (последнее будет работать только в браузере IE).
    • Опишите скрипты сначала с использованием функций, а затем в виде значений атрибутов событий

    Выполнение данного задания к уроку доступно на видео:

    Теперь выполним задание. Внимательно ознакомьтесь с постановкой задачи и ее детализацией, а затем перейдите к поэтапному выполнению задания.

    Задание js11_2.
    Постановка задачи:
    На странице представлены изображения кресел, которые могут быть либо занятыми, либо пустыми (атрибут тега alt=yes || no), и кнопка для поиска свободного места.
    Щелчок по кнопке осуществляет поиск пустого места. Если таковое имеется – к соответствующему изображению добавлять рамку.


    HTML-код:


    Детализация задания:
    Создать три функции:

    • функция инициализации мест initSeats() ; (занято: alt=no либо свободно: alt=yes); запуск функции по загрузке страницы;
    • функция отображения состояния мест showSeatStatus(num) ; запускается по щелчку на изображении с сидением и выдает сообщение «свободно» или «занято»
    • функция поиска свободных мест findSeats() ; выделяет изображения со свободными местами рамкой

    По загрузке страницы должна запускаться функция, где происходит:

    • привязка функции findSeats() к событию onclick кнопки;
    • привязка событий onclick к изображениям кресел;
    • вызов функции инициализации кресел.
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 //инициализация мест function initSeats() { ... .alt = "yes" ; ... .alt = "no" ; ... ... } // функция отображения состояния мест: занято или свободно function showSeatStatus(num) { if (...("seat" + num) .alt == "yes" ) { alert ("свободно" ) } else { alert ("занято" ) } } // Поиск свободных мест среди всех возможных function findSeats() { var i = 0 ; // Проверяем, свободно ли текущее место for (i; i