Проверка наличия фокуса у элемента DOM

Question

У меня есть текстовое поле лайтбокса, которое отображается с помощью вызова AJAX из ASP.NET UpdatePanel. Когда отображается лайтбокс, я использую метод focus() текстового поля, находящегося в лайтбоксе, чтобы сразу же сфокусироваться на текстовом поле.

В Firefox текстовое поле получает фокус без проблем. В IE текстовое поле не получает фокус, если я не использую

setTimeout(function(){txtBx.focus()}, 500);

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

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

Очевидно, что установка таймера для «исправления» этой проблемы - не лучший и не самый элегантный способ решения этой проблемы. Я хотел бы иметь возможность сделать что-то вроде следующего:

var txtBx = document.getElementById('txtBx');

if (txtPassword != null) {
    txtPassword.focus();
    while (txtPassword.focus === false) {
        txtPassword.focus();
    }
}

Есть ли способ сказать, что текстовое поле имеет фокус, чтобы я мог сделать что-то вроде выше?

Или я смотрю на это неправильно?

Редактировать
Чтобы уточнить, я не вызываю код при загрузке страницы. Сценарий находится в верхней части страницы , однако он находится внутри функции, которая вызывается при завершении асинхронной обратной передачи ASP.NET, а не при загрузке страницы.

Поскольку это отображается после обновления Ajax, DOM уже должен быть загружен, поэтому я предполагаю, что событие jQuery $(document).ready() здесь не поможет.

Answer 1

Вы пытались добавить атрибут autofocus="autofocus" к элементу текстового поля, который вызывается через Ajax?

Обычно, когда мне нужны определенные дополнительные функции JavaScript для работы с динамическим контентом, я просто добавляю этот JavaScript к вызываемому контенту.

Этот JavaScript также будет выполняться после добавления в DOM. Я не вижу смысла в написании JavaScript в ваш родительский файл, а затем в «прослушивании» изменений в DOM. Как вы упомянули, setTimeout () - это скорее взлом, чем что-либо подобное :)

Answer 2

Похоже, что IE не обновляет DOM до тех пор, пока не завершится выполнение скрипта. Таким образом, циклическое тестирование фокуса не позволит обновить DOM. Использование setTimeout, вероятно, является единственным рабочим решением.

Ваш пример с .focus() является хорошо известным примером, см., Например, этот ответ .

Answer 3

В IE есть несколько вещей, которые делают свое дело:

1. Если фокусирующий элемент имеет другое значение z-index - вы можете быстро установить z-index на значение элемента, находящегося в данный момент в фокусе (возможно, установить атрибут hidden), установить фокус, а затем установить его обратно в исходное значение z-index .

2. Попробуйте blur() текущий фокусированный элемент.

3. Если элемент «подкладка» - сфокусировать элемент «подкладка».

Answer 4

Вы можете попробовать это:

1. Используйте событие endRequest для PageRequestManager . Это событие происходит после завершения обновления Ajax.
2. Фокус текстовое поле в обработчике событий

Вот пример кода:

<script type="text/javascript">
    function onRequestEnd()
    {
     var txtBx = $get('txtBx');
     txtBx.focus();
    }  
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onRequestEnd);
</script>

Для первоначальной фокусировки текстового поля вы можете использовать функцию pageLoad (ярлык для события load объекта Application на стороне клиента):

<script type="text/javascript">
function pageLoad()
{
    var txtBx = $get('txtBx');
    txtBx.focus();
}
</script>

Answer 5

вы можете попробовать что-то вроде этого [IE Specific]. (Непроверенные)

theAjaxCreatedElement.onreadystatechange = function() {
    if ( this.readyState != "complete" ) 
        return;
    this.focus();
};

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

Answer 6

Попробуйте поместить javascript, который устанавливает фокус в конец страницы, а не в начало, или включите его после события загрузки страницы. Это поможет убедиться, что DOM полностью загружен перед установкой фокуса.

Я использовал FastInit для этого. JQuery $ (document) .ready () также будет работать.