在onClick事件中更改Javascript焦点？ [英] Changing Javascript Focus in onClick event?

问题描述

注意：可能的解决方案只需要在Firefox 3.0中运行，我的应用程序不允许从IE访问！ =）

Note: A possible solution needs only work in Firefox 3.0, my app doesn't allow access from IE! =)

我有一个链接，当点击时，会向用户显示一个灯箱：

I have a link that, when clicked, will display a lightbox to the user:

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

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

My problem is that when the lightbox is displayed, the focus remains on the link. So if the user presses the up or down keys, they end up scrolling the main document, not the lightbox that is displayed!

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

I've tried to set the focus to the lightbox element using code like this

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

如果我在firebug控制台中键入它，这样可以正常工作，但不能正常工作如果我将它包含在onclick片段的末尾。似乎我无法将焦点从onclick事件中执行的代码中的链接更改？

This works fine if I type it in the firebug console, but will not work if I include it at the end of the onclick snippet. It appears as though I can't change the focus away from the link from code executed inside the onclick event?

- - 更新1
我之前尝试过这样的事情

-- Update 1 I've tried something like this before

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

我修改了函数来添加一些调试输出，如下所示

and I've modified function to add some debugging output, as follows

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="#">

所以在我做任何事情之前的重点是在链接上，在我试图改变焦点之后它仍然保留在链接上？

So the focus before I did anything was on the link and after I tried to change the focus it still remained on the link?

不确定是否重要，但我使用ajax加载灯箱，如下所示

Not sure if it matters, but I use ajax to load the lightbox, as follows

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

我试图在ajax完成后设置焦点，但也没有运气。

I tried to set the focus after the ajax complete, but also, no luck.

我缺少什么？

我一直在努力做一个下面通过尝试设置焦点建议的解决方案工作，看看我是否通过检查document.activeElement成功，如果没有，请等待100毫秒再试一次。如果我使用以下函数，它将起作用

I've been trying to make a solution work that was suggested below by trying to set the focus, seeing if I succeeded by checking document.activeElement, if not, wait 100 milliseconds and try again. If I use the following function, it will work

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语句是否会影响焦点？或许将焦点带到控制台调试窗口？

However, if I remove the firebug debugging statment console.log, the function stops working!! I have no idea why this would be the case?? Why would outputting a variable to the firebug console affect weather focus is moved to the element or not? Does the console.log statement affect focus? perhaps by bringing the focus to the console debugging window?

推荐答案

这是最终有效的功能

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似乎影响设置焦点？在我使用此功能之间暂停更改焦点的尝试之前。

So why did console.log seem to affect setting the focus? Before I was using this function to pause between attempts of changing the focus.

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

这导致javascript不断地做某事，我认为它没有给文档时间渲染或更新等等。 console.log似乎打破了这个锁，让页面有机会改变它的焦点。

This causes javascript to constantly be doing something and I think it wasn't giving the document time to render or update or something. The console.log seemed to break this lock and give the page a chance to change its focus.

当我改变使用超时来暂停尝试之间的方法时，控制台。不再需要日志！

When I changed approaches to using the timeout to pause between attempts, console.log was no longer needed!

感谢bmoeskau指出我正确的方向。

Thanks bmoeskau for pointing me in the right direction.

这篇关于在onClick事件中更改Javascript焦点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！