Управление фокусом

Фокус - это характеристика текущего окна, фрейма или поля формы. В каждом из разделов, описывающем программирование этих объектов мы так или иначе касаемся вопроса фокуса. Под фокусом понимают возможность активации свойств и методов объекта. Например, окно в фокусе, если оно является текущим окном, т.е. лежит поверх всех других окон, и исполняются его методы или можно получить доступ к его свойствам.

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

совместно. Следует сразу заметить, что фреймы - это тоже объекты класса Window, и многие решения, разработанные для окон справедливы и для фреймов.

Управляем фокусом в окнах

Для управления фокусом у объекта класса окно существуют два метода focus() и blur(). Первый передает фокус в окно, в то время как второй фокус из окна убирает. Рассмотрим простенький пример:

function hide_window()
{
wid=window.open("","kuku","width=400,height=200");
wid.opener.focus();
wid.document.open();
... wid.document.close();
}

В данном примере новое окно сразу после своего открытия теряет фокус. Прячется за основным окном-родителем. Если при первичном нажатии на кнопку оно еще всплывает и только после этого прячется, то при повторном нажатии пользователь не видит появления нового окна, т.к. оно уже открыто и меняется только его содержание.

Для того чтобы этого не происходило нужно после открытия передавать фокус на новое окно:

function visible_window()
{
wid=window.open("","kuku","width=400,height=200");
wid.focus();
wid.document.open();
... wid.document.close();
}

Если теперь нажимать попеременно кнопки "Скрытое окно" и "Видимое окно", то окно то будет появляться, то исчезать. При этом новых окон не появляется, т.к. с одним и тем же именем может быть открыто только одно окно.

Невидимое окно может доставить неприятности пользователю, из которых самая безобидная - отсутствие реакции на его действия. Код просто записывается в невидимое окно. Но ведь в скрытом окне можно что-нибудь и запустить. Для этого стоит только проверить, существует ли данное окно или нет, и если оно есть и не в фокусе, то активировать в нем какую-нибудь программу.

Для реализации такого сценария достаточно использовать метод окна onblur(). Его можно также задать в контейнере BODY в качестве обработчика события onBlur, но в этом случае он видим пользователю. Мы воспользуемся этим методом в лоб:

window.onblur = new Function("window.defaultStatus = 'Background started...';");
window.onfocus = new Function("window.defaultStatus = 'Document:Done';");

Обратите внимание на поле статуса браузера. Оно демонстрирует возможность выполнения функции в фоновом режиме. Кроме того onblur() в этом виде не отрабатывает в Exlorer. Причина кроется в прототипе объекта и возможности его переназначения программистом.

Конечно, когда придумывали всю эту конструкцию думали не о том, как насолить пользователю, а о том как сократить ресурсы, необходимые браузеру для отображения нескольких окон. Ведь можно выполнить все то же самое с точностью до наоборот: запускать, например часы в фокусе и останавливать их в фоне. Но этот пример мы рассмотрим в контексте фреймов.


начало страницы

Управление фокусом во фреймах

Фрейм - это такое же окно, как и само окно браузера. Точнее - это объект того же класса. К нему применимы те же методы, что и к обычному объекту окно:

var flag=1;
function clock()
{
if(flag==0)
{
d=new Date();
s=d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
window.document.forms[0].elements[0].value=s;
}
setTimeout('clock();',100);
}
window.onblur = new Function('this.flag = 1;');
window.onfocus = new Function('this.flag = 0;');
window.onload = clock;

Данный фрагмент кода размещен в каждом из двух фреймов, которые отображаются в примере. А их ровно два. Просто ширина границы набора фреймов установлена в 0. Если окно примера разделить мысленно примерно пополам и "кликнуть" мышью в одну из половин, то пойдут часы в этой половине. Если теперь переместиться в другой фрейм и "кликнуть" мышью в нем, то часы пойдут в поле формы этого фрейма, а в другом фрейме остановятся.


начало страницы

Фокус в полях формы

Управление фокусом в полях формы кроме этого раздела изложено еще и в разделе "Текст в полях ввода". Здесь мы рассматриваем этот вопрос в контексте общего применения методов blur() и focus(). Эти методы определены для любого поля формы, а не только для полей ввода. Рассмотрим простой пример:

Фамилия:
Имя:
Отчество:
Пол:

Попробуйте изменить в этой форме значение любого из полей. Вряд ли это будет возможно. Обработчик события Focus (onFocus) уводит фокус из поля на произвольное место страницы.


начало страницы