在onClick事件中更改Javascript焦点?

时间:2009-05-22 05:52:46

标签: javascript javascript-events firebug prototypejs

注意:可能的解决方案只需要在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 debugging statment console.log,该函数就会停止工作!!我不知道为什么会这样?为什么输出变量到firebug控制台会影响天气焦点是否移动到元素? console.log语句是否会影响焦点?也许将焦点带到控制台调试窗口?

4 个答案:

答案 0 :(得分:4)

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

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

答案 1 :(得分:4)

这是最终起作用的功能

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指出我正确的方向。

答案 2 :(得分:1)

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

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

答案 3 :(得分:0)

让元素集中注意力。在元素的加载事件中,设置几毫秒的超时,然后调用this.focus();

其他尝试jQuery。