How can I prevent the iFrame from stealing focus [advanced]?

Question

I am working on a site that loads an iframe (from another domain) when a user types in a text box.

Sometimes an iframe loads a site that steals focus. This is especially annoying as the user will type in the text box and will now enter the iframe text box.

There seems to be no way to disable the iframe from stealing focus. To mitigate this, I am trying to find a reasonable way to find out when to redirect my text box. He has a rather big headache. The main reason this sucks is that I cannot understand the way the text box was blurred intentionally, unlike an iframe stolen by focus.

This is how much I got, but I need help:

var my_textbox = $("#my_textbox"); var iframe = $("#iframe"); var enableBlur = true; my_textbox.blur(function(){ if (!enableBlur){ //settimeout is required to redo focus. annoying. //sadly, within these "0" ms, the user can still type //into the iframe textbox. like i said: annoying. :( setTimeout(function(){ my_textbox[0].focus(); } , 0); } }); //later on, in some function //lets disable blur while the iframe loads enableBlur = false; iframe.attr("src", "http://www.some-site-that-steals-focus.com"); iframe.bind("load", function(){ //note: this is fired *after* the page loads //assume the threat of focus stealing is gone //after 1 second of the iframe being loaded setTimeout(function(){ enableBlur = true; }, 1000); }); 

Now notice how terrible UX is if you want to intentionally stop typing in the text box. While the iframe loads, you are "locked" into the text box ... you cannot even enter the address bar of your browser.

Any ideas on how to improve this? I hope that I am missing something completely obvious, but I'm sure not.

As always, thanks for the help.

Answer 1

some ideas (no more)

observe the onmouseout event of the document and compare coordinates with iframe coordinates. Thus, it should be possible to find out if the user is in the iframe (and you can take a “good” focus)

Of course, there are many ways to set focus on an iframe, for example using [TAB]

To catch this, you can insert an element that can be focused just before the iframe. It should have focus in front of the iframe.