Изменение JavaScript фокусируется в OnClick Meat?

Question

Примечание. Возможное решение требует только работы в Firefox 3.0, мое приложение не позволяет доступа от IE! знак равно

У меня есть ссылка, которая при нажатии будет отображать для пользователя Lightbox:

<a href="#" onclick="show_lightbox();return false;">show lightbox</a>

Моя проблема в том, что когда отображается Lightbox, основное внимание остается на ссылке. Поэтому, если пользователь нажимает клавиши вверх или вниз, он в конечном итоге прокручивает основной документ, а не на Lightbox, который отображается!

Я пытался установить фокус на элемент Lightbox, используя подобный код

function focus_on_lightbox() {
  document.getElementById('lightbox_content').focus(); 
} 

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

---

- Обновление 1 Я пробовал что-то подобное раньше

<a href="#" onclick="show_lightbox();focus_on_lightbox();return false;">show lightbox</a>

и я изменил функцию, чтобы добавить некоторые результаты отладки, следующим образом

function focus_on_lightbox() {
  console.log('hihi');
  console.log(document.activeElement);
  document.getElementById('lightbox_content').focus(); 
  console.log(document.activeElement);
}

Вывод выглядит следующим образом

hihi
<a onclick="closePopup();lightbox('apartment_detail','11619');focus_on_lightbox();return false;" href="#">
<a onclick="closePopup();lightbox('apartment_detail','11619');focus_on_lightbox();return false;" href="#">

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

Не уверен, что это имеет значение, но я использую Ajax для загрузки Lightbox, следующим образом

  new Ajax.Updater(lightbox_content_id, url, {asynchronous:true, evalScripts:true, onLoading:show_lightbox_loading(), onComplete:focus_on_lightbox() }); 

Я попытался установить фокус после завершения Ajax, но также не повезло.

Что мне не хватает?

---

Я пытался сделать решение, которое было предложено ниже, пытаясь уделить фокус, увидев, удастся ли мне проверить Document.activeElement, если нет, подождите 100 миллисекунд и попробуйте еще раз. Если я использую следующую функцию, она будет работать

function focus_on_lightbox() {
  var seconds_waited = 0
  pause(100);
  var current_focus = document.activeElement
  while (document.getElementById(lightbox_content_id) != current_focus && seconds_waited < 2000)
  {
    document.getElementById(lightbox_content_id).focus(); 
    console.log(document.activeElement);
    pause(100);
    current_focus = document.activeElement
    seconds_waited += 100;
  }
}

Однако, если я удалю консоль отладки Firebug. Я понятия не имею, почему это было бы так ?? Почему вывод переменной для консоли Firebug влияет на фокус погоды в элемент или нет? Влияет ли утверждение Console.log фокусируется? Возможно, привлекло внимание к окну отладки консоли?

Answer 1

Вот функция, которая наконец сработала

function focus_on_lightbox(seconds) {
  var seconds_waited
  seconds_waited = seconds
  document.getElementById(lightbox_content_id).focus(); 
  seconds_waited += 100;

  if (document.getElementById(lightbox_content_id) != document.activeElement && seconds_waited < 2000)
    setTimeout("focus_on_lightbox(" + seconds_waited + ");", 100);
  {
  }
}

Так почему же console.log, похоже, повлиял на установку фокуса? До того, как я использовал эту функцию, чтобы сделать паузу между попытками изменить фокус.

function pause(milliseconds) {
    var dt = new Date();
    while ((new Date()) - dt <= milliseconds) { /* Do nothing */ }
}

Это заставляет JavaScript постоянно делать что -то, и я думаю, что это не дает документу время рендеринга или обновления или что -то в этом роде. Console.log, казалось, сломала этот замок и дал странице шанс изменить свое внимание.

Когда я изменил подходы к использованию тайм -аута для паузы между попытками, Console.Log больше не нуждалась!

Спасибо Bmoeskau за указание мне в правильном направлении.

Answer 2

Я думаю, что ваша проблема состоит в том, чтобы вызвать ваш метод фокуса после возврата False. Ваш код должен быть таким:

<a href="#" 
    onclick="show_lightbox();focus_on_lightbox();return false;">
    show lightbox
</a>

Answer 3

По моему опыту, проблемы с фокусом иногда могут быть связаны с временем (например, Focus () выполняется до того, как элемент будет полностью готов к сосредоточенности). Я предполагаю, что разметка Lightbox создается динамически, когда вызывается функция Show_lightbox? Если это так, вы можете попытаться добавить небольшую задержку, прежде чем попытаться сосредоточиться, чтобы посмотреть, является ли это проблемой, что -то вроде:

setTimeout("focus_on_lightbox();", 10);

Answer 4

Сделайте фокус элемента. На событии загрузки элемента установите тайм -аут из нескольких мс, а затем назовите это .focus ();

Иначе попробуйте jQuery.