在onClick事件中更改Javascript焦点？

Question

注意:可能的解决方案只需要在Firefox 3.0中运行,我的应用程序不允许从IE访问!=)

我有一个链接,点击后会向用户显示一个灯箱:

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

我的问题是,当显示灯箱时,焦点仍然在链接上.因此,如果用户按下向上或向下键,它们最终会滚动主文档,而不是显示的灯箱!

我试图使用这样的代码将焦点设置到灯箱元素

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加载灯箱,如下所示

  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调试statment console.log,该函数将停止工作!我不知道为什么会这样？为什么输出变量到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 为我指明了正确的方向。