javascript - 更改 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 调试语句 console.log，该功能将停止工作!!我不知道为什么会这样？？为什么将变量输出到 Firebug 控制台会影响天气焦点是否移动到元素？ console.log 语句是否影响焦点？也许通过将焦点带到控制台调试窗口？

Answer 1

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

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