Changing Javascript Focus in onClick event?

Question

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(); 
} 

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?

---

-- 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);
}

The output is as follows

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?

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() }); 

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

What am I missing?

---

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;
  }
}

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?

Answer 1

I think your problem is calling your focus method after return false. your code should be like that :

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