I am working on a site that loads an iframe (from another domain) as a user types into a textbox.
Sometimes, the iframe loads a site that will steal the focus. This is particularly annoying, as the user will have been typing in my textbox, and now will be typing into the iframe's textbox.
It seems there's no way to disable an iframe from stealing focus. To mitigate this, I'm trying to come up with a sensible way to figure out when to refocus my textarea. It's turning out to be quite a headache. The main reason this sucks is because I cannot figure out a way to tell when my textbox has been blurred intentionally, versus when the iframe has stolen focus.
Here is as far as I've gotten, but I need some 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's 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 note how terrible of a UX this is if you want to intentionally stop typing into the text field. While the iframe is loading, you're "locked" into the text field... you can't even type into the address bar of your browser.
Any ideas on how to improve this? I'm hoping that I'm missing something completely obvious, but I'm pretty sure I'm not.
As always, thanks for your help.