在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

我认为你的问题是在返回false后调用你的焦点方法。 你的代码应该是这样的：

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

Answer 2

这是最终起作用的功能

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 3

根据我的经验，焦点问题有时可能与时间相关（例如，在元素完全准备好聚焦之前执行focus（））。 我假设在调用show_lightbox函数时动态创建灯箱标记？ 如果是这种情况，您可以尝试添加一点延迟，然后再尝试关注以确定是否存在问题，例如：

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

Answer 4

使元素集中注意力。 在元素的加载事件中，设置几毫秒的超时，然后调用this.focus（）;

否则尝试jQuery。