[jQuery] "Focus" code snippet for: BlockUI, Lightbox, Thickbox, and other windows...
Guys,
It has been a long time since the first blockUI and "window" plugins
(e.g. lightbox/thickbox) became available. However, i still didn't see
this piece of code in any of these sollutions. All projects have
thesame "bug", you can TAB out of the lightbox, to the underlying
page. (For a demo, open any project demo page, open the window and hit
TAB a few times. Eventually you will "jump" the page to another
location.. Not very user friendly...).
Especially in blockUI this snippet can be usefull:
/**
* keepFocusInside (The name needs some work)
* Basicly it checks to see if the element which wants to receive
focus
* is a direct child of the SOME_ELEMENT you pass. If not, it returns
false.
*/
function keepFocusInside(oEvent, oParent) {
if (oElement = oEvent.srcElement || oEvent.target) {
return jQuery(oElement).parents(oParent).length;
} else {
// For all other browsers
return true;
}
}
Usage When the "block" starts:
jQuery(document).focus(function(oEvent) { return
keepFocusInside(oEvent, SOME_ELEMENT); });
Usage When the "block" ends:
jQuery(document).unfocus(function(oEvent) { return
keepFocusInside(oEvent, SOME_ELEMENT); });
HTH,
Gilles