Change Javascript Focus in onClick event?

Question

Note. A possible solution should work only in Firefox 3.0, my application does not 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. Therefore, if the user presses the up or down keys, they complete the scrolling of the main document, and not the shortcut that is displayed!

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

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

This works fine if I find it in the firebug console, but won't work if I include it at the end of the onclick snippet. It seems that I can’t change the focus from the link from the code executed inside the onclick event?

---

- Update 1 I tried something like this before

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

and I changed the function to add debug output, as shown below.

 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, was it still on the link?

Not sure if that matters, but I use ajax to load the lightbox, as shown below.

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

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

What am I missing?

---

I am trying to work with the solution suggested below, trying to set focus, if I succeeded, 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 delete the debuging firebug console.log console, the function stops working !! I have no idea why this is so. Why does the variable output to the firebug console affect the focus of the weather, is it moving to the element or not? Is the console.log expression affecting the focus? perhaps by focusing on the debug console window?

Answer 1

Here is the function that finally worked

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

So why does console.log seem to affect focus settings? Before I used this function to pause between attempts to change focus.

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

This leads to the fact that javascript is constantly doing something, and I think that this did not give the document time to render or update or something else. Console.log seemed to break this lock and give the page the ability to change its focus.

When I changed the approach of using a timeout to pause between attempts, console.log is no longer needed!

Thanks bmoeskau for pointing me in the right direction.

Answer 2

I think your problem is calling the focus method after returning false. your code should be like this:

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

Answer 3

In my experience, focusing issues can sometimes be related to the chronometer (for example, focus () is executed before the item is fully ready for focusing). I assume that the lightbox markup is created dynamically when the show_lightbox function is called? If this is the case, you can try adding a little delay before trying to focus to see if there is a problem, for example:

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

Answer 4

Make the element a focus. At the item load event, set the timeout to a few ms, and then call this.focus ();

Try jQuery again.